您的位置：首页 > Web前端 > HTML5

HTML5之Canvas(一)

2016-06-26 15:05 393 查看

一:绘制Canvas图形(矩形)的步骤为:

1.在

<body></body>

中定义canvas的标签,指定画布的宽度和高度，指定其id的值;

2.通过document.getElementById()方法找到id对应的canvas对象；

3.通过找到的对象的getContext(‘2d’)的方法找到图形的上下文context;

4.填充(fill)和绘制(stroke)边框

5.通过图形的上下文的fillRect(x,y,Width,Height);stroke(x,y,Width,Height);两个方法来绘制矩形，这里的x,y指的是x轴和y轴的起始坐标点。

function draw(id){
var canvas=document.getElementById(id);
if(canvas==null){
return false;
}
//在HTML中画布已经占好了位置,现在只需找到它
var context=canvas.getContext('2d');
//指定在画布上首先要绘制的图形的样式，就是一个和画布一样大小的矩形颜色是浅紫色
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);

//完善一下，把边框的默认样式改变，注意边框的样式必须要加在定义的前面，否则无效！！！
context.strokeStyle="blue";
context.lineWidth=1;
//指定在画布上其次要绘制的图形的样式,这里增加一个方法，也绘制一下边框的大小和样式
context.fillStyle="red";
context.fillRect(50,50,100,100);
context.strokeRect(50,50,100,100);

}

其中fillStyle属性指的是填充的样式，也就是填充的颜色的值；

strokeStyle指的是图形边框的样式，也就是图形边框的颜色的值。

context还有一个函数，用于指定区域中的颜色全部变成白色，

context.clearRect(x,y,Width,Height);

二:绘制Canvas的其他类型的图形,要绘制其他的图形，需要使用路径,也就是说首先使用路径来勾勒图形的轮廓，然后设置上颜色。

这里以绘制圆形为例:

1.在

<body></body>

中定义canvas的标签,指定画布的宽度和高度，指定其id的值;

2.通过document.getElementById()方法找到id对应的canvas对象；

3.通过找到的对象的getContext(‘2d’)的方法找到图形的上下文context;

4.开始创建路径:context.beginPath();

5.创建圆形路径,这个时候需要调用上下文的arc方法，

context.arc(x,y,radius,startAngle,endAngle,anticlockwise)

x为绘制圆形的起始的横坐标，y为绘制圆形的起始地y坐标。radius为圆形的半径，startAngle为开始的角度，endAngle为结束的角度，anticlockwise是否按照顺时针的方式绘制。

6.关闭路径:context.closePath();此时准备工作完成

7.绘制图形的样式:context.fillStyle();

function drawcal(id){

var canvascal=document.getElementById(id);
if(canvascal==null){
return false;
}
var contextcal=canvascal.getContext('2d');

contextcal.fillStyle="#EEEEFF";
contextcal.fillRect(0,0,400,300);

var n=0;

for(var i=0;i<10;i++){
contextcal.beginPath();
contextcal.arc(i*25,i*25,i*10,0,Math.PI*2,true);
contextcal.closePath();
contextcal.fillStyle='rgba(255,0,0,0.25)';
contextcal.fill();

}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航