有關於canvas幾個新知識點

對於canvas的初學者來講,如下幾點應該是不知道的知識點:javascript

一、canvas有兼容IE6/7/8的腳本文件 下載地址:https://github.com/arv/explorercanvasjava

二、用canvas對象獲取的2d繪圖上下文其實能夠本身往裏面擴展本身的繪圖方法:如 繪製星星、畫虛線等等git

/**
畫五角星的方法
參數: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的五角星

三、canvas還有不少新的api已經出臺,可是瀏覽器支持不是很好,因此咱們不經常使用,想知道canvas還有哪些新的api 能夠去 http://www.w3.org/TR/2dcontext/ 看看 github

 

四、你想知道瀏覽器是否支持某個canvas的api  能夠這樣寫  canvas

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 的方法')  
}
相關文章
相關標籤/搜索