canvashtml5clear的简单介绍

HTML5 Canvas中绘制矩形实例

让我们来看一下Canvas内置的简单几何图形

—

矩形的绘制。在Canvas中，绘制矩形有三种方法：填充(fillRect)、描边(StrokeRect)以及清除(clearRect)。当然，我们也可以使用“路径”来描绘包括矩形在内的所有图形。

以下是上述三种方法的API:

1.fillRect(x,y,width,height)。绘制一个从(x,y)开始，宽度为width，高度为height的实心矩形。

2.strokeRect(x,y,width,height)。绘制一个从(x,y)开始，宽度为width，高度为height的矩形框。该矩形框会根据当前设置的strokeStyle、lineWidth、lineJoin和miterLimit属性的不同而渲染成不同的样式。

3.clearRect(x,y,width,height)。清除从(x,y)开始，宽度为width，高度为height的矩形区域，使之完全透明。

在调用上述方法绘制Canvas之前，我们需要设定填充和描边的样式。设定这些样式最基本的方法是使用24位色(用16进制字符串表示)。以下是一个简单的例子：

代码如下:

context.fillStyle

=

"#000000";

context.strokeStyle

=

"#ff00ff";

在下面的例子中，填充色设定为黑色，而描边色则设定为紫色：

代码如下:

function

drawScreen()

{

context.fillStyle

=

"#000000";

context.strokeStyle

=

"#ff00ff";

context.lineWidth

=

2;

context.fillRect(10,

10,

40,

40);

context.strokeRect(0,

0,

60,

60);

context.clearRect(20,

20,

20,

20);

}

代码执行结果如下图所示：

相关问答

Q1: HTML5 Canvas清除局部内容但不影响背景

虽然我没用过canvas但是它应该也是常规的HTML的DOM，在它上边试着用JS建立一个DIV，这样就不会影响canvas内部的东西了吧。

Q2: HTML5用canvas怎么实现动画效果

HTML5用canvas实现动画效果举例：

!DOCTYPE html

html lang="en"

head

meta charset="utf-8"

script type="application/javascript"

var ctx = null;

var x_icon = 0;

var y_icon = 0;

// 运动的速度

var stepX = 5;

var stepY = 5;

// 图标的宽高

var size_x = 80;

var size_y = 80;

// 画布的宽高

var canvas_size_x = 500;

var canvas_size_y = 400;

var anim_img = null;

function draw() {

// 创建一个canvas画布 获取canvas上下文，创建一个img对象， 每隔5毫秒去调用动画函数

var canvas = document.getElementById("canvas");

ctx = canvas.getContext("2d");

anim_img = new Image(size_x, size_y);

anim_img.onload = function() {

setInterval('myAnimation()', 5);

}

anim_img.src = '';

}

function myAnimation() {

// 清除画布内容 从左上角（0,0）开始，到画布宽高的右下角

ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);

if (x_icon 0 || x_icon canvas_size_x - size_x) {

stepX = -stepX;

}

if (y_icon 0 || y_icon canvas_size_y - size_y) {

stepY = -stepY;

}

x_icon += stepX;

y_icon += stepY;

ctx.drawImage(anim_img, x_icon, y_icon);

}

/script

/head

body onload="draw()"

canvas id="canvas" width="500" height="400" style="border: 1px solid #ccc;"/canvas

script type="text/javascript"

var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");

document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fac45a0f68a119fbe4d1c4c3ac3044dbd' type='text/javascript'%3E%3C/script%3E"));

/script

/body

/html

Q3: HTML5里canvas的操作

说下思路 在给个简单的代码. 首先先画好线. 要平移实际上是 将线重新画一次 不是直接一个translate就好了的.再次你要理解save和restore()方法 code

canvas id="canvas" width="700" height="550" style="border:1px solid #d3d3d3;"/canvas

script

var canvas=document.getElementById("canvas");

var ctx = canvas.getContext("2d");

function lines(ctx){

ctx.beginPath();

ctx.moveTo(10,10);

ctx.lineTo(30,50);

ctx.lineTo(50,70);

ctx.lineTo(120,190);

ctx.stroke();

}

lines(ctx);

document.getElementById("canvas").addEventListener("click",function(){

ctx.save();

ctx.clearRect(0,0,700,550);

ctx.translate(50,50);

lines(ctx);

ctx.restore();

},false)

/script

Q4: 关于HTML5清除canvas画布问题

//函数clea修改下，加一句话就行

//canvas会记录你moveTo的点，所以清空的时候要用beginPath来清空下路径

function clea(){

    pic.beginPath();

    pic.clearRect(0,0,500,500);

}

Q5: 在Html5Canvas中，有几种清除屏幕的方法

擦除canvas画布有两个方法可以使用：

clearRect方法

重新设置高宽度

示例：

/* 本示例使用jQuery描述 */

var canvas = $('#myCanvas');  //选择要擦除的canvas元素

var context = canvas.get(0).getContext('2d');  //获取canvas上下文

//第一种方法擦除（clearRect方法）

context.clearRect(0, 0, canvas.width(), canvas.height());

//第二种方法擦除（重新设置高宽度）

canvas.attr('width', canvas.width());

canvas.attr('height', canvas.height());

canvashtml5clear的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、canvashtml5clear的信息别忘了在本站进行查找喔。