canvas基础的学习

canvas（画布）是html5新增的标签元素，用来定义图形，比如图表和其他图像。<canvas>标签只是图形容器，必须使用脚本（通常为javascript）来绘制图形。

canvas与svg的区别

canvas是HTML5提供的新元素<canvas>，而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。 首先，从它们的功能上来讲，canvas可以看做是一个画布。其绘制出来的图形为标量图，因此，可以在canvas中引入jpg或png这类格式的图片，在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。 另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。而svg，所绘制的图形为矢量图，所以其用法上受到了限制。因为只能绘制矢量图，所以svg中不能引入普通的图片，因为矢量图的不会失真的效果，在项目中我们会用来做一些动态的小图标。 但是由于其本质为矢量图，可以被无限放大而不会失真，这很适合被用来做地图，而百度地图就是用svg技术做出来的。 另外从技术发面来讲canvas里面绘制的图形不能被引擎抓取，如我们要让canvas里面的一个图片跟随鼠标事件：canvas.onmouseover=function(){}。而svg里面的图形可以被引擎抓取，支持事件的绑定。 另外canvas中我们绘制图形通常是通过JavaScript来实现，svg更多的是通过标签来来实现，如在svg中绘制正矩形形就要用<rect>，这里我们不能用属性style="width:XXX;height:XXX;"来定义。 我再来介绍一个svg的js库：TWO.JS。其中包含two.js和three.js前者用于绘制二维图形，后者用于绘制三维图形。TWO.JS可以支持三种格式，svg（默认）、canvas、和WEBGL。当然也可以在普通div中引入。 要从同一图形的一个<canvas>标记中移除元素，需要擦掉重新绘制；而svg很容易编辑，只要从其描述中移除元素即可。 以上是之前在别人博客中看到的，所以先引用过来，待之后熟练掌握canvas，svg再写自己的心得体会。 具体请参考

1、基本语法

var canvas = document.getElementById("canvasMain"), ctx = canvas.getContext("2d");

替换内容是在不支持<canvas>标签的浏览器中展示的。也可以通过检测getContext()方法的存在来判断是否支持（有些浏览器会为html规范之外的元素创建默认的html元素对象）

var canvas = document.getElementById("canvasMain"); if(canvas.getContext("2d")) { var ctx = canvas.getContext("2d"); // drawing code here } else { // canvas-unsupported code here }

导出在<canvas>元素上绘制的图像，接收一个参数，即图像的MIME类型格式。若绘制到画布上的图像来自不同域，该方法会报错

var canvas = document.getElementById("canvasMain");if(canvas.getContext) {//取得图像的数据URIvar imgURI = canvas.toDataURL('image/png');//显示图像var image = document.createElement('img'); image.src = imgURI; document.body.appendChild(image); }

2、2D上下文

• 填充和描边

　　填充：用指定的样式（颜色、渐变、图像）填充图形；描边：在图形的边缘画线 两个属性分别是fillStyle strokeStyle，属性的值可以是字符串、渐变对象或模式对象

• 绘制矩形

　　

　　绘制矩形方法：fillRect() strokeRect() clearRect() 参数依次为：矩形x坐标、y坐标、宽度、高度

var drawing = document.getElementById('drawing');if(drawing.getContext) {var context = drawing.getContext('2d'); context.strokeStyle = 'rgba(0, 0, 255, 0.5)';//描边属性context.fillStyle = 'pink';//填充属性context.lineWidth = 3; //描边线条宽度context.lineCap = 'square';//线条末端形状（butt平头、round圆头、square方头）context.lineJoin = 'round';//线条相交的方式（round圆交、bevel斜交、miter斜接）context.fillRect(10, 10, 50, 50);//填充矩形context.fillStyle = 'green'; context.fillRect(30, 30, 50, 50); context.strokeRect(100, 10, 50, 50);//描边矩形context.clearRect(40, 40, 15, 15);//清除画布上的矩形区域 }

• 绘制路径

　　

　　closePath()绘制一条连接到路径起点的线条

　　 fill()填充路径 stroke()描边路径 clip()在路径上创建一个剪切区域

　　isPointInPath(x,y)判断画布上的某一点是否位于路径上

var drawing = document.getElementById('drawing');if(drawing.getContext) {/*绘制路径*/var context = drawing.getContext('2d'); context.strokeStyle = 'pink'; context.beginPath();//开始绘制新路径//绘制外圆context.arc(100, 100, 99, 0, 2*Math.PI, false);//参数依次为圆心坐标x、y、半径、起始角度(用弧度表示)、结束角度、起始角度是否按逆时针方向计算（flase为顺时针）context.moveTo(194, 100);//将绘图游标移动到（x,y）,不画线//绘制内圆context.arc(100, 100, 94, 0, 2*Math.PI, false);//绘制分针context.moveTo(100, 100); context.lineTo(100, 25);//从上一点开始绘制一条直线，到（x,y）为止//绘制时针context.moveTo(100, 100); context.lineTo(35, 100);//绘制文本context.font = 'bold 14px Arial';//表示文本样式、大小、字体context.textAlign = 'center';//文本对齐方式（start、end、left、right、center）,建议用start、end代替left、rightcontext.textBaseline = 'middle';//文本的基线(top、hanging、middle、alphabetical、ideopgraphic、bottom)context.fillText('12', 100, 20);//描边路径 context.stroke();//额外练习context.moveTo(230, 10);//arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线，到(x2,y2)为止，并以给定的半径穿过（x1,y1）context.arcTo(280, 60, 330, 10, 50);//bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到(x,y)为止，并以(c1x,c1y)(c2x,c2y)为控制点context.bezierCurveTo(210, 70, 290, 90, 300, 100); context.moveTo(320, 10);//quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线，到(x,y)为止，并以(cx,cy)为控制点context.quadraticCurveTo(420, 100, 400, 10);//rect(x,y,width,height):从点(x,y)开始绘制矩形，此方法绘制的是矩形路径而不是独立的形状context.rect(450, 10, 50, 50); context.stroke(); }

• 绘制文本

　　fillText()绘制文本 strokeText()为文本描边 参数：文本字符串、x坐标、y坐标、可选的最大像素宽度

• 变换

　　

var drawing = document.getElementById('drawing');if(drawing.getContext) { //变换var context = drawing.getContext('2d'); context.strokeStyle = 'rgba(0, 0, 255, 0.5)'; context.beginPath(); context.arc(100, 100, 99, 0, 2*Math.PI, false); context.moveTo(194, 100); context.arc(100, 100, 94, 0, 2*Math.PI, false);//变换原点context.translate(100, 100);//将坐标原点移动到该点//旋转表针context.rotate(1);//围绕原点旋转图像angle弧度//绘制分针context.moveTo(0, 0); context.lineTo(0, -80);//绘制时针context.moveTo(0, 0); context.lineTo(-65, 0); context.stroke(); context.rotate(-1); context.fillStyle = 'rgba(0, 0, 255, 0.5)'; context.save();//保存上下文状态，只保存绘图上下文的设置和变换，不会保存绘图上下文的内容context.fillStyle = 'pink'; context.translate(-100, -100); context.save(); context.fillStyle = 'green'; context.fillRect(220, 10, 50, 50);