HTML5 Canvas 绘图详解-优快云博客

html5的画布功能

一.建立画布区域：<canvas id="drawPage" height="500px" width="500px" style="background-color: yellowgreen">你的浏览器不支持画布</canvas>中间的文字在不支持画布功能时出现。

二.首先获取canvas对象，然后调用canvas对象的getContext方法，这个方法目前只能传入参数 “2d”。

var drawPage=document.getElementById(“drawPage”);
var drawing=drawPage.getContext(“2d”);

三.canvas在绘图的时候有两种方法：

(1).fill()方法：填充方法，图形内是填充的。

(2).stroke()方法：绘制方法，图形内饰空的。注：绘制线条时使用stroke()方法。

(3).在绘制图形前，设置好绘图的样式。drawing.fillStyle="#2BCD31"或者drawing.strokeStyle="2BCD31"。

四.绘制图形：

(1).绘制矩形：drawing.fillRect(x,y,width,heigt); x，y为对画布的x和y坐标，width指矩形的宽，height为高。

(2).绘制圆：drawing.arc(x, y, radius, startAngle, endAngle, anticlockwise)，x，y为圆心坐标，radius为半径，startAngle为起始角度，endAngle为结束角度，这两个参数的单位为弧度（Math.PI为180度）。anticlockwise有两个值，true为逆时针，false为顺时针。这个需要drawing.fill()来绘制，如果没有这句，将不能执行

注：在绘制圆时加入beginPath()和closePath()方法可以实现圆的闭合。如：

drawing.fillStyle=”#2BCD31”;
drawing.beginPath();
drawing.arc(200,150,75,0,Math.PI,true);
drawing.closePath();

(3).绘制一条直线。drawing.moveTo(X,Y);drawing.lineTo(x,y)；drawing.stroke();，第一个语句定义直线的起始位置，第二条语句定义直线的终点坐标，第三条为绘制图形。

实例：

var drawPage=document.getElementById(“drawPage”);
var drawing=drawPage.getContext(“2d”);
drawing.moveTo(20,30);
drawing.lineTo(200,100);
drawing.stroke();

(4).scale(scalewidth,scaleheight)缩放功能。注：①.scalewidth为宽度的放大和缩小比例，scaleheight为高度的放大和缩小比例。②如果对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。包括边框。

代码：

drawing.strokeRect(5,5,25,15);
drawing.scale(2,2);
drawing.strokeRect(5,5,25,15);
drawing.scale(2,2);
drawing.strokeRect(5,5,25,15);

(5).rotate(angle)方法。注：①angle可以通过如30*Math.PI/180的方法转为角度。单位是弧度，不能直接使用度数。②rotate()方法会影响后面所有的元素，所以会先通过tranlate（）方法来确定旋转的中心点，默认为画布的左上角。

实例（此处还展示save（）和restore（）方法）：

ctx.fillStyle = “rgb(250,0,0)”;
ctx.save();
ctx.translate(50,50); //这个translate(50，50)发生在rotate()之前,其目的是将旋转点从默认点(0，0),移动到(50，50),下面紧跟着的rotate就是按照这个点来转
//rotate方法的旋转点完全是按照[在其上\紧跟着它的]translate来确定旋转点的…
ctx.rotate(-Math.PI/8);
ctx.translate(-50,-50);//这个translate是在rotate之下,也就是rotate已经转过了再执行translate(-50,-50),它其实也是将坐标点从(50，50)重新移到了(0，0),紧跟在他下面的rotate旋转中心就是按照(0，0)来旋转的
ctx.fillRect(50,50,100,200);

//ctx.beginPath();
ctx.fillStyle=”rgb(0,255,0)”
ctx.rotate(-Math.PI/6);
ctx.fillRect(50,50,100,200);

ctx.restore();
ctx.fillStyle = “rgb(0,0,250)”;
ctx.fillRect(50,50,5,5);

(5).translate(x,y)平移方法：x为横坐标，y为纵坐标。实例可参考上面的实例。

(6).引入图片方法：

①.新建对象：var img = new Image();。

②.设置图片的属性和方法。图片的来源设置：img.src = 'oneeye.jpg';，方法：img.onload=function(){ctx.drawImage(img,10,10,30,30,50,50,100,100);}公式中的参数依次为：img 规定要使用的图像、画布或视频。

sx 可选。开始剪切的 x 坐标位置。

sy 可选。开始剪切的 y 坐标位置。

swidth 可选。被剪切图像的宽度。

sheight 可选。被剪切图像的高度。

x 在画布上放置图像的 x 坐标位置。

y 在画布上放置图像的 y 坐标位置。

width 可选。要使用的图像的宽度。（伸展或缩小图像）

height 可选。要使用的图像的高度。（伸展或缩小图像）。