html5(canvas)画图

前言 ＜ canvas ＞＜ /canvas ＞ 是html5出现的新标签，像所有的Dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图 。

前言

< canvas >< /canvas > 是html5出现的新标签，像所有的Dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图 。canvas非常好玩，也非常实用，下面就专门研究一下。

基本知识

context:应该翻译为“内容”吧，context是一个封装了很多绘图功能的对象，获取这个对象的方法是：

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

也许这个2d勾起了大家的无限遐想，但是很遗憾的告诉你html5还只是个少女，不提供3d服务。

canvas元素绘制图像的时候有两种方法，分别是：

context.fill()//填充 context.stroke()//绘制边框

style:在进行图形绘制前，要设置好绘图的样式

context.fillStyle//填充的样式 context.strokeStyle//边框样式 context.lineWidth//图形边框宽度

绘制矩形
context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)

x: 矩形起点横坐标（坐标原点为canvas的左上角，当然确切的来说是原始原点，这个问题后面吧研究旋转的时候可以细论）

y: 矩形起点纵坐标

width: 矩形长度

height: 矩形高度

function draw21(id) { var canvas = document.getElementById(id) if (canvas == null) return false; var context = canvas.getContext("2d"); //实践表明在不设置fillStyle情况下默认fillStyle=black context.fillRect(0, 0, 100, 100); //实践表明在不设置strokeStyle情况下默认strokeStyle=black context.strokeRect(120, 0, 100, 100); //设置纯色 context.fillStyle = "red"; context.strokeStyle = "blue"; context.fillRect(0, 120, 100, 100); context.strokeRect(120, 120, 100, 100); /*颜色的表示方式: 直接用颜色名称:"red" "green" "blue" 十六进制颜色值: "#EEEEFF" rgb(1-255,1-255,1-255) rgba(1-255,1-255,1-255,透明度) */ /*设置透明度实践证明透明度值>0,<1值越低，越透明， 值>=1时为纯色，值<=0时为完全透明*/ context.fillStyle = "rgba(255,0,0,0.2)"; context.strokeStyle = "rgba(255,0,0,0.2)"; context.fillRect(240,0 , 100, 100); context.strokeRect(240, 120, 100, 100); }

清除矩形区域
context.clearRect(x,y,width,height)

x:清除矩形起点横坐标

y:清除矩形起点纵坐标

width:清除矩形长度

height:清除矩形高度

function draw21(id) { var canvas = document.getElementById(id) if (canvas == null) return false; var context = canvas.getContext("2d"); //实践表明在不设置fillStyle情况下默认fillStyle=black context.fillRect(0, 0, 100, 100); //实践表明在不设置strokeStyle情况下默认strokeStyle=black context.strokeRect(120, 0, 100, 100); //设置纯色 context.fillStyle = "red"; context.strokeStyle = "blue"; context.fillRect(0, 120, 100, 100); context.strokeRect(120, 120, 100, 100); /*颜色的表示方式: 直接用颜色名称:"red" "green" "blue" 十六进制颜色值: "#EEEEFF" rgb(1-255,1-255,1-255) rgba(1-255,1-255,1-255,透明度) */ /*设置透明度实践证明透明度值>0,<1值越低，越透明， 值>=1时为纯色，值<=0时为完全透明*/ context.fillStyle = "rgba(255,0,0,0.2)"; context.strokeStyle = "rgba(255,0,0,0.2)"; context.fillRect(240,0 , 100, 100); context.strokeRect(240, 120, 100, 100); context.clearRect(50, 50, 240, 120); }

圆弧
context.arc(x, y, radius, starAngle,endAngle, anticlockwise)

x:圆心的x坐标

y:圆心的y坐标

radius: 半径

straAngle:开始角度

endAngle:结束角度

anticlockwise:是否逆时针（true）为逆时针，(false)为顺时针

注：无论是逆时针还是顺时针，角度都沿着顺时针扩大，如下图：

function draw0(id) { var canvas = document.getElementById(id); if (canvas == null) { return false; } var context = canvas.getContext('2d'); context.beginPath(); context.arc(200, 150, 100, 0, Math.PI * 2, true); //不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果 context.closePath(); context.fillStyle = 'rgba(0,255,0,0.25)'; context.fill(); }

路径
context.beginPath()
context.closePath()

function draw23(id) { var canvas = document.getElementById(id); if (canvas == null) { return false; } var context = canvas.getContext('2d'); var n = 0; //左侧1/4圆弧 context.beginPath(); context.arc(100, 150, 50, 0, Math.PI/2 , false); context.fillStyle = 'rgba(255,0,0,0.25)'; context.fill(); context.strokeStyle = 'rgba(255,0,0,0.25)' context.closePath(); context.stroke(); //右侧1/4圆弧 context.beginPath(); context.arc(300, 150, 50, 0, Math.PI/2 , false); context.fillStyle = 'rgba(255,0,0,0.25)'; context.fill(); context.strokeStyle = 'rgba(255,0,0,0.25)'; context.closePath(); context.stroke(); }

实验结果如下：

得出的结论为：*号为重点
1、系统默认在绘制第一个路径的开始点为beginPath

*2、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制

3、每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分

ps：如果你真心凌乱了（其实我也没有完全弄明白），那么记住每次画路径都在前后加context.beginPath() 和 context.closePath()就行

绘制线段
context.moveTo(x,y)
context.lineTo(x,y)

x: x坐标

y: y坐标

每次画线都从moveTo的点到lineTo的点，

如果没有moveTo那么第一次lineTo的效果和moveTo一样，