有关于canvas几个新知识点

开发者自阳技术 2022年11月8日

0 收藏 989 点赞 1,642 浏览 1054 个字

对于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 的方法')
}