js中canvas繪圖全解


var mycanvas = document.getElementById("mycanvas");
if(mycanvas.getContext){ //判斷瀏覽器是否支持
var context = mycanvas.getContext("2d"); //context是畫布,getContext獲取繪圖上下文對象,也有名為WebGL的3d上下文
//繪制矩形
context.fillStyle = "#0000ff"; //填充顏色
context.fillRect(10,10,70,70); //填充矩形,xy寬高(像素)
context.lineWidth = 20; //邊框寬度
context.lineCap = "round"; //線條末端形狀,butt平頭,round圓頭,square方頭,
context.lineJoin = "round"; //線條交叉方式,round圓交,bevel斜交,miter斜接
context.strokeStyle = "red"; //描邊顏色
context.strokeRect(50,50,50,50); //描邊矩形
context.clearRect(50,50,20,20); //清除一塊矩形區域
//繪制路徑
context.beginPath(); //創建路徑
context.arc(200,100,20,0,2*Math.PI,false); //繪制圓參數:圓心坐標,半徑,起始角度,是否順時針。 arcTo繪制圓弧
context.moveTo(200,100); //移動繪圖游標
context.lineTo(200,15); //繪制直線,從游標位置惠子直線到參數,bezierCurveTo繪制曲線,quadraticCurveTo繪制二次曲線,reac繪制矩形,
context.fillStyle = "rgba(0,0,0,1)"
context.stroke(); //用strokeStyle描邊
context.fill(); //用fillStyle填充

//繪制文本
context.font = "bold 14px Arial"; //設置文本樣式,大小,字體
context.textAlign="center"; //文本對齊方式,start、end
context.textBaseline = "middle"; //上下對齊方式,top、middle、bottom
context.fillText("文本",200,15); //fillText使用fillStyle,strokeText使用strokeStyle
context.globalAlpha =0.5; //設置全局透明度
//context.save(); //保存當前狀態
context.translate(10,10); //坐標平移,transform矩陣變換,setTransform先恢復默認再矩陣變換
context.rotate(1); //旋轉角度,scale縮放比例,

//drawImage繪制圖像
//shadowColor、shadowOffsetX、shadowOffsetY、shadowBlur陰影
//createLinearGradient漸變
//createPattern填充描邊模式
//getImageData獲取圖像數據
var imgurl = mycanvas.toDataURL("image/png");
var image = document.createElement("img");
image.src = imgurl;
hintdiv1.appendChild(image);

//WebGL繪圖3D
}

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com