有关于canvas几个新知识点
对于canvas的初学者来说,以下几点应该是不知道的知识点:
1、canvas有兼容IE6/7/8的脚本文件 下载地址:https://github.com/arv/explorercanvas
2、用canvas对象获取的2d绘图上下文其实可以自己往里面扩展自己的绘图方法:如 绘制星星、画虚线等等
/** 画五角星的方法 参数:cxt canvas上下文 * x:星星的中心坐标 ,y: 星星的中心y轴坐标 *r : 星星中间尖的圆半径 *R : 星星外接圆半径 *rotation:星星逆时针旋转的角度 *lw: 线条宽度 */ CanvasRenderingContext2D.prototype.fillStar = function( x, y , r, R,rotation,lw,color){ this.beginPath(); this.lineWidth=lw || 5; this.fillStyle=color || '#000'; for (var i=0;i<5;i++){ this.lineTo(Math.cos((18+i*72-rotation)/180*Math.PI)*R+x , Math.sin(-(18+i*72-rotation)/180*Math.PI)*R+y); this.lineTo(Math.cos((54+i*72-rotation)/180*Math.PI)*r+x , Math.sin(-(54+i*72-rotation)/180*Math.PI)*r+y); } this.closePath(); this.fill() } getElementById('canvas').getContext('2d').fillStar(100,100, 200,300, 0, 10, 'red') //画一个红色的边框为10的五角星
3、canvas还有很多新的api已经出台,但是浏览器支持不是很好,所以我们不常用,想知道canvas还有哪些新的api 可以去 http://www.w3.org/TR/2dcontext/ 看看
4、你想知道浏览器是否支持某个canvas的api 可以这样写
if(context.ellipse){ context.beginPath() context.ellipse(400,400,200,300,0,0,2*Math.PI) context.stroke() //画一个中心在400,400,短半轴为200,长半轴为300,旋转角度为0 的一个椭圆 }else{ alert('您的浏览器不支持ellipse 的方法') }
内容均为原创,如果对您有用,欢迎评论交流