html5中canvas的学习使用

浏览数：35 / 时间：2015年06月09日

canvas：<canvas>标签只是图形容器，你必须使用脚本来绘制图形，有一个机遇javascript的绘图API。要从同一图形的一个<canvas>标记中移除元素，往往需要擦掉绘图重新绘制它。

　　大多数canvas绘图API都是定义在通过画布的getContext()方法获取的一个"绘图环境"对象上。

<canvas id="canvas" width="400" height="300">
您的浏览器不支持Canvas
</canvas>
<script>
var canvas=document.getElementById("canvas");
if(canvas.getContext)
{
    var context=canvas.getContext("2d");
}
</script>

View Code

　　每个canvas都有一个对应的context对象，canvas　API定义在这个context对象上面。使用getContext方法获取该对象。参数2d表示绘制2d平面图形。

　　1.context.beginPath方法表示开始绘制路径，MoveTo(x,y)设置线段的起点，lineTo(x,y)设置线段的终点。strokeStyle属性设置线段颜色，stroke方法用来给线段着色。

//绘制线段，有closePath（）整个变成一个封闭的图形。
context.beginPath();
context.moveTo(10,200);
context.lineTo(100,250);
context.lineTo(100,500);
context.closePath();
context.strokeStyle="#ffcc00";
context.stroke();

　　2.fillRect(x,y, width,height)方法用来绘制矩形，四个参数为矩形左上角的顶点及矩形宽高。fillStyle属性用来填充矩形颜色。

　　　strokeRect方法与fillRect方法类似，用来绘制空心矩形。

　　　clearRect方法用来清除某个矩形区域内容。你可以在已画好的矩形部分截取掉某部分。

//绘制矩形
context.fillStyle="eeeeff";
context.fillRect(0,0,400,300);
//绘制空心矩形
context.strokeRect(0,0,400,300);
//清除矩阵区域
context.clearRect(0,0,200,100);

　　3.绘制圆形和扇形。

　　　　arc(x,y,radius,startAngle,endAngle,anticlockwise):radius表示半径，startAngle与endAngle则是扇形的起始角度和终止角度(用弧度表示)，anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。

//绘制实心的圆。
context.beginPath();
context.fillStyle="#ff0000";
context.arc(100,100,30,5,Math.PI*1,true);
context.fill();
//绘制空心圆

 context.beginPath();
 context.arc(60,60,10,0,Math.PI*1,true);
 context.strokeStyle="#ff0000";
 context.stroke();

　　4. createLinearGradient 设置渐变色

　　　　createLinearGradient(x1,y1,x2,y2):其中x1和y1是起点坐标，x2和y2是终点坐标。通过不同的坐标值，可以生成从上至下,从左到右的渐变等等。

//设置一矩形水平渐变色

var grd==context.createLinearGradient(0,50,100,50);
grd.addColorStop(0,"#ff0");
grd.addColorStop(1,"#f00");
context.fillStyle=grd;
context.fillRect(10,10,200,300);

　　5.设置阴影

　　　　ctx.shadowOffsetX设置水平位移，ctx.shadowOffsetY设置垂直位移，ctx.shadowBlur设置模糊度，ctx.shadowColor设置阴影颜色。

//设置一矩形阴影。
context.shadowOffsetX=10;
context.shadowOffsetY=10;
context.shadowBlur=5;
context.shadowColor="rgba(0,0,0,0.5)";

context.fillStyle="red";
context.fillRect(20,20,200,200);

　　6.绘制文本

　　　　fillText(string,x,y)用来绘制文本，它的三个参数分别为文本内容，起点的X,Y坐标，使用前需要先用font设置字体,大小,样式。

　　　　strokeText()方法用来添加空心文字。

//设置字体。
context.font="Bold 10px Arial";
context.textAligh="left";
context.fillStyle="red";
context.fillText("Hell0!",10,50);
//绘制空心字体
context.strokeText("Hello!",10,100);

　　7.载入图像：drawImage

　　　 canvas允许将图像文件插入画布，做法是读取图片后，使用drawImage方法在画布内进行重绘。由于图像的载入需要时间，drawImage方法需要在图片完全载入后才能调用。

　　　　drawImage方法接受三个参数，第一个参数是图像文件的DOM元素，即img标签，第二个第三个是图像左上角在canvas中的坐标。

//载入图像
var img=new Image();
img.onload=function(){
    if(img.width!=canvas.width)
        img.width=canvas.width;
    if(img.height!=canvas.height)
        img.height=canvas.height;        
    context.clearRect(0,0,canvas.width,canvas.height);//将画布清空。
    context.drawImage(img,0,0);
}
img.src="demo.jpg";