HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图
Canvas 是H5的一部分，允许脚本语言动态渲染图像。Canvas 定义一个区域，可以由html属性定义该区域的宽高，javascript代码可以访问该区域，通过一整套完整的绘图功能（API）,在网页上渲染动态效果图。
二、Canvas 能做什么
游戏：毫无疑问，游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧。
图表制作：图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作。当然，使用SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。
字体设计：对于字体的自定义渲染将完全可以基于Web，使用HTML5技术进行实现。
图形编辑器：图形编辑器能够100%基于Web实现。
其他可嵌入网站的内容：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。
三、Canvas基本用法
1.使用<canvas>必须先设置其width和height属性，指定可绘图区域大小,只指定宽高不添加样式或者绘制图像的话，在页面中将看不到该元素。
1 <canvas id='draw' width='200px' height='200px'></canvas>
2 .绘制图像的话，我们首先要取到canvas并调用getContext()方法，然后传入上下文名字（2D/3D）,2D有两种基本绘图操作|填充(fillStyle)|描边(strokeStyle)|，这两个属性默认值为#000
1 var draw = document.getElementById('draw'); 2 //确认浏览器是否支持<canvas>元素 3 if(draw.getContext){ 4 var context = draw.getContext('2d'); 5 //给context绘制红色的边框 6 context.strokeStyle = '#f00'; 7 //内部填充大草原的颜色 8 context.fillStyle = '#0f0'; 9 }
3 .使用toDataURL()方法，可以导出<canvas>元素上绘制的图像
1 var draw = document.getElementById('draw'); 2 if(draw.getContext){ 3 //显示图像，toDataURL()获取到的是一串base64的字符串 4 var drawURL = draw.toDataURL('image/png'); 5 var image = document.createElement('img'); 6 image.src = drawURL; 7 document.body.appendChild(image); 8 }
4 .绘制矩形，主要有三个方法，fillRect()为矩形填充颜色、strokeRect()为矩形描边、clearRect()清除矩形。这三个方法都接收4个参数x/y/w/h，矩形的左上角坐标和宽高
1 var draw = document.getElementById('draw'); 2 //确认浏览器是否支持<canvas>元素 3 if(draw.getContext){ 4 var context = draw.getContext('2d'); 5 6 //绘制红色矩形,绿色描边 7 context.fillStyle = '#f00'; 8 context.strokeStyle = '#0f0'; 9 context.strokeRect(10,10,50,50); 10 context.fillRect(10,10,50,50); 11 12 //绘制绿色矩形,红色描边 13 context.fillStyle = '#0f0'; 14 context.strokeStyle = '#f00'; 15 context.strokeRect(10,10,50,50); 16 context.fillRect(10,10,50,50); 17 18 //在两个矩形重叠的地方清除一个小矩形 19 context.clearRect(40,40,10,10); 20 }
5 .绘制路径，通过路径可以创造出复杂的形状和线条，要绘制路径，首先要调用beginPath()方法，再通过以下方法来实际的绘制路径
1 arc(x,y,radius,startAngle,endAngle,conterclockwise) 2 (x,y)圆心坐标、radius半径、(startAngle,endAngle)起始角度和终止角度、conterclockwise顺时针(false)/逆时针(true) 3 4 moveTo(x,y) 将游标移动到(x,y)，不画线。可以用来修改所谓的上一点坐标* 5 6 arcTo(x1,y1,x2,y2,radius) 7 从上一点开始绘制一条曲线到(x2,y2),并且以给定的radius穿过(x1,y1) 8 9 lineTo(x,y) 从上一点开始绘制一条直线，到(x,y) 10 11 rect(x,y,width,height) 12 从(x,y)开始绘制一个矩形，宽高为width、height。这个方法绘制的是矩形路径，而非strokeRect()和fillRect()所绘制的独立的形状 13 14 //接下来绘制一个不带数字的时钟 15 var draw = document.getElementById('draw'); 16 if(draw.getContext){ 17 var context = draw.getContext('2d'); 18 //开始路径 19 context.beginPath(); 20 //绘制外圆 21 context.arc(100,100,99,0,2*Math.PI,false); 22 //绘制内圆 23 context.moveTo(194,100); 24 context.arc(100,100,94,0,2*Math.PI,false); 25 //绘制分针 26 context.moveTo(100,100); 27 context.lineTo(100,15); 28 //绘制时针 29 context.moveTo(100,100); 30 context.lineTo(35,100); 31 //描边路径 32 context.stroke(); 33 context.strokeStyle = '#f00'; 34 }
6 . 绘制文本，主要有两个方法，fillText(),strokeText(),都接收四个参数|text(要绘制的文本)|x|y|最大像素宽度(可选)|，这两个方法都已下列三个属性为基础
font文字样式，大小，字体等
textAlign 文本对其方式|start|end|left|right|center|
textBaseline 文本的基线|top|hanging|middle|alphabetic|ideographic|bottom|1 //在表盘绘制12点 2 context.font = 'bold 12px Arial'; 3 context.textAlign = 'center'; 4 context.textBaseline = 'middle'; 5 context.fillText('12',100,20);
7 . 变换
1 rotate(angel) 围绕原点旋转图像angle弧度 2 scale(scaleX,scaleY) 缩放图像，x*scaleX,y*scaleY 默认1 3 translate(x,y) 将坐标原点移动到(x,y) 4 5 var draw = document.getElementById('draw'); 6 if(draw.getContext){ 7 var context = draw.getContext('2d'); 8 //开始路径 9 context.beginPath(); 10 //绘制外圆 11 context.arc(100,100,99,0,2*Math.PI,false); 12 //绘制内圆 13 context.moveTo(194,100); 14 context.arc(100,100,94,0,2*Math.PI,false); 15 //变换原点 16 context.translate(100,100); 17 //旋转表针 18 context.rotate(1) 19 //绘制分针 20 context.moveTo(0,0); 21 context.lineTo(0,-85); 22 //绘制时针 23 context.moveTo(0,0); 24 context.lineTo(-65,0); 25 //描边路径 26 context.stroke(); 27 context.strokeStyle = '#f00'; 28 }
8 . 绘制图像，drawImage()
1 var img = document.getElementByTagNames('image')[0]; 2 context.drawImage(img,0,10,50,50,0,100,40,60); 3 9个参数: 要绘制的图像 原图像|x|y|w|h| 目标图像|x|y|w|h|
9 . 阴影和渐变
1 阴影主要是以下几个属性值 2 shadowColor 3 shadowOffsetX : X轴阴影偏移量 4 shadowOffsetY : Y轴阴影偏移量 5 shadowBlur : 模糊像素数，默认0，不模糊 6 7 var context = draw.getContext('2d'); 8 //设置阴影 9 context.shadowColor = 'rgba(210,210,210,.5)'; 10 context.shadowOffersetX = '5'; 11 12 渐变 创建一个新的线性渐变 createLinearGradient()方法，有四个参数|x1|y1|x2|y2|分别为起点的坐标和终点的坐标 13 var gradient = context.createLinearGradient(30,30,70,70); 14 gradient.addColorStop(0,'#fff'); //0表示开始 15 gradient.addColorStop(1,'#000'); //1表示结束 16 //使用定义好的渐变属性 17 context.fillStyle = gradient; //填充的时候放入渐变 18 context.fillRect(30,30,50,50);
创建一个放射渐变 createRadialGradient(),六个参数|x1|y2|radius1|x2|y2|radius2|分别为第一个圆心和半径第二个圆心和半径，用法和线性渐变相同
10 . 使用图像数据，可以通过getImageData()取得原始图像数据。四个参数|x|y|w|h|。每个ImageData对象有三个属性，width/height/data，data是一个数组，内部存着每一个像素的数据,每个元素的值介于0-255之间
1 var imgdata = context.getImageData(0,0,100,100); 2 var data = imgdata.data, 3 red = data[0], 4 green = data[1], 5 blue = data[2], 6 alpha = data[3]; 7 8 //实现一个灰色过滤器 9 var draw = document.getElementById('draw'); 10 if(draw.getContext){ 11 var context = draw.getContext('2d'); 12 var img = document.getElementsByTagName('image')[0], 13 imageData,data, 14 i,len,average, 15 red,green,blue,alpha; 16 //绘制原始图像 17 context.drawImage(img,0,0,100,100); 18 //获取图像数据 19 imageData = context.getImageData(0,0,img.width,img.height); 20 data = imageData.data; 21 for(i=0,len=data.length;i<len;i+=4){ 22 red = data[i]; 23 green = data[i+1]; 24 blue = data[i+2]; 25 alpha = data[i+3]; 26 //计算rgb的平均值 27 average = Math.floor((red+green+blue)/3); 28 //设置颜色值 29 data[i] = average; 30 data[i+1] = average; 31 data[i+2] = average; 32 } 33 imageData.data = data; 34 //把数据绘制在画布 35 context.putImageData(imageData,0,0) 36 }
