你的位置:首页 > Java教程

[Java教程]HTML5 Canvas 绘图


首先要注意: <canvas> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Explorer 9.

需要先获得2D渲染上下文才能绘制<canvas>元素

var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');

 

Canvas是基于状态绘制图像的。

基本使用:
1.使用下面两个方法就可以定义一个路径

context.moveTo(x,y); //起点context.lineTo(x,y); //连线到终点

 

2.对于多个路径,如果想要分开处理,需要在路径定义的首尾加上下面两个方法,把他们分隔开

context.beginPath();context.closePath();

 

3.路径样式

context.lineWidth  //定义线条宽度context.strokeStyle  //定义线条颜色context.fillStyle  //填充颜色context.stroke();  //绘制线条context.fill();    //绘制填充的颜色块

 

4.绘制弧线

context.arc(  centerx, centery, radius,  //圆心坐标(x,y)以及半径r  startingAngle, endingAngle,  //开始的弧度值,和结束的弧度值  anticlockwise = false    //可选参数,(false顺时针绘制)还是(true逆时针绘制))

 

5.绘制矩形

context.rect(x, y, width, height); //设置矩形状态context.fill();context.stroke();//或者context.fillRect(x, y, width, height); //绘制填充的矩形context.strokeRect(x, y, width, height); //绘制边框的矩形

 

6.fillStyle、strokeStyle的属性值的格式

#FFF#333rgb(255,128,0)rgba(100,100,100,0.8)hsl(20,62%,28%)hsla(40,83%,33%,0.6)red

 

7.线条的帽子:lineCap
用于设置线条两端的形状,有以下三种值:

butt(default)  //默认缺省round  //圆头square  //方头context.lineCap = "round";

 

8.线条与线条相交的形态:lineJoin
   三种属性值:

miter(default)  //尖角bevel  //斜接round  //圆角context.lineJoin = "round";//当尖角很尖锐时,会出现lineJoin为bevel//此时跟另外一个属性有关:miterLimit,默认值是10//当在lineJoin为miter情况下,miterLimit大于10时,lineJoin会自动变成bevel

 

9.图像变换和状态保存
图像变换:

位移:translate(x,y);旋转:rotate(deg);缩放:scale(sx,sy);//保存当前图形状态:context.save();//恢复图形的所有状态:context.restore();//使用:context.save();context.translate(x,y);context.restore();

 

10.变换矩阵

a  c  eb  d  f0  0  1a水平缩放(1)b水平倾斜(0)c垂直倾斜(0)d垂直缩放(1)e水平位移(0)f垂直位移(0)即:默认时,该变换矩阵为单位阵//设置变换矩阵transform(a,b,c,d,e,f);//重置变换矩阵setTransform(a,b,c,d,e,f);

 

11.线性渐变

var grd = context.createLinearGradient(xstart,ystart,xend,yend);//开始坐标到结束坐标grd.addColorStop(stop,color);//stop为浮点数,开始坐标点到结束坐标点直线上,某个位置(0.0~1.0之间)//例:var skyStyle = context.createLinearGradient(0,0,800,800);skyStyle.addColorStop(0.0, 'black');skyStyle.addColorStop(1.0, 'blue');context.fillStyle = skyStyle;

 

12.径向渐变

var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);//开始圆心坐标到结束圆心坐标,以及半径grd.addColorStop(stop,color);//stop为浮点数,开始坐标点到结束坐标点直线上,某个位置(0.0~1.0之间)

 

13.图片填充

createPattern(img,repeat-style) //img为图片对象,repeat-style填充格式//其中repeat-style: no-repeat/repeat-x/repeat-y/repeat//例:var backgroundImage = new Image();backgroundImage.src = "bg.jpg";backgroundImage.onload = function(){var pattern = context.createPattern(backgroundImage,"repeat");context.fillStyle = pattern;context.fillRect(0,0,800,800);}

 

14.canvas填充

createPattern(canvas,repeat-style) //canvas对象,repeat-style填充格式

例:

  window.onload=function(){    var canvas=document.getElementById("canvas");    canvas.width=800;    canvas.height=800;    var context=canvas.getContext("2d");    var backCanvas=createBackgroundCanvas();    var pattern=context.createPattern(backCanvas,"repeat");    context.fillStyle=pattern;    context.fillRect(0,0,800,800);  }  function createBackgroundCanvas(){    var backCanvas=document.createElement("canvas");    backCanvas.width=100;    backCanvas.height=100;    var backContext=backCanvas.getContext("2d");    backContext.beginPath();    backContext.moveTo(15,15);    backContext.lineTo(50,50);    backContext.lineWidth=10;    backContext.strokeStyle="green";    backContext.stroke();    return backCanvas;  }

 

15.video填充

createPattern(video,repeat-style) //video视频对象

 

16.另一种弧线绘制方法

context.arcTo(  x1,y1,x2,y2,  //x1,y1,x2,y2两个坐标与起始点x0,y0组成一个角  radius  //半径)

例:

context.moveTo(x0,y0);context.arcTo(x1,y1,x2,y2,R);//起始点为(x0,y0),该弧线与01线以及12线相切

 

17.贝塞尔曲线
贝塞尔二次曲线

context.moveTo(x0, y0);  //起始点context.quadraticCurveTo(  x1, y1,  //控制点坐标  x2, y2  //终点坐标)

参考:http://tinyurl.com/html5quadratic

贝塞尔三次曲线

context.moveTo(x0, y0);  //起始点context.bezierCurveTo(  x1, y1, //控制点坐标  x2, y2, //控制点坐标  x3, y3 //终点坐标)

参考:http://tinyurl.com/html5bezier

 

18.文字渲染

context.font = "font-style font-variant font-weight font-size font-family";  //css字体样式,默认值:"20px sans-serif"context.fillText(String, x, y, [maxlen]);  //String字符串,和坐标位置,第四个为可选参数,这行文字的最长宽度context.strokeText(String, x, y, [maxlen]);  font-style: normal  (Default)      italics  (斜体字)      oblique  (倾斜字体)font-variant: normal (Default)       small-caps  (小写英文字母变成小的大写字母)font-weight: normal  (Default)       lighter       bold       bolder       100,200,300,400(normal)       500,600,700(bold)       800,900font-size: 20px (Default)      2em      150%font-family: 设置多种字体备选,支持@font-face

文本水平对齐:

context.textAlign = left          right          center

文本垂直对齐:

context.textBaseline = top            middle            bottom            alphabetic (Default)            ideographic            hanging

文本的度量:

context.measureText(String).width //获取渲染的字符串的宽度

 

19.阴影

context.shadowColor  //阴影颜色context.shadowOffsetX  //阴影的位移值context.shadowOffsetYcontext.shadowBlur  //阴影模糊度

 

20.全局方法:

context.globalAlpha = 1 (Default)  //全局透明度,默认不透明context.globalCompositeOperation = "source-over" (Default) //绘制的图像在重叠的时候的效果,默认是(source-over)后面绘制的图像覆盖前面绘制的图像"source-atop"  //后面绘制的图像覆盖前面绘制的图像,但后面的图像只显示重叠部分"source-in"  //后面绘制的图像覆盖前面绘制的图像,但只显示重叠部分"source-out"  //只显示后绘制的图像,而且重叠部分被切掉"destination-over"  //前面绘制的图像覆盖后面绘制的图像"destination-atop"  //前面绘制的图像覆盖后面绘制的图像,但前绘制的图像只显示重叠部分"destination-in"  //前面绘制的图像覆盖后面绘制的图像,但只显示重叠部分"destination-out"  //只显示前绘制的图像,而且重叠部分被切掉"lighter"  //重叠部分颜色叠加融合"copy"  //只显示后绘制图像"xor"  //异或,重叠部分被挖空

 

21.剪辑区域
将当前创建的路径设置为当前剪切路径的方法

void ctx.clip();void ctx.clip(fillRule);void ctx.clip(path, fillRule);

fillRule

这个算法判断一个点是在路径内还是在路径外。

path
需要剪切的 Path2D 路径。

例:

ctx.arc(100, 100, 75, 0, Math.PI*2, false);ctx.clip();ctx.fillRect(0, 0, 100,100);

 

22.非零环绕原则
路径方向
应用:镂空剪纸效果

23.canvas交互

context.clearRect(x,y,width,height) //清空指定的区域context.isPointInPath(x,y) //点击检测函数,该点是否在当前规划路径内,当检测点包含在当前或指定的路径内,返回 true;否则返回 false//以下两个是获取鼠标点击在canvas坐标var x = event.clientX - canvas.getBoundingClientRect().left;var y = event.clientY - canvas.getBoundingClientRect().top;

 

24.扩展Canvas的context
将drawStar方法扩展到context:

CanvasRenderingContext2D.prototype.drawStar = function(){}

 

25.Canvas兼容性
检测

<canvas id="canvas">当前浏览器不支持Canvas,请更换浏览器再试</canvas>

Canvas与IE6、7、8浏览器的兼容性问题

引入explorecanvas库:

https://code.google.com/p/explorecanvas/<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->

 

26.canvas图形库:canvasplus || artisanJS || RGraph

http://code.google.com/p/canvasplus

http://artisanjs.com

http://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph

 

27.Canvas 的 API 接口文档:

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D