html5 canvas 學習

標籤：

 1 <canvas id="mycanvas"></canvas> 2 var c=document.getElementById("mycanvas"); 3 c.width=500; 4 c.height=500; 5 var ctx=c.getContext("2d"); 6 畫矩形 7  8 ctx.fillStyle="#ff0000"; 9 ctx.fillRect(0,0,200,200);10 畫線11 ctx.moveTo(0,0);12 ctx.lineTo(200,200);13 ctx.stroke();14 畫圓15 ctx.fillStyle="#ff0000";//實心顏色16 ctx.beginPath();17 ctx.arc(100,100,50,0,Math.PI*2,true);18 ctx.closePath();19 ctx.fill();//填充顏色20 21 畫三角形22 ctx.strokeStyle="#ff0000";架構顏色，線的顏色23 ctx.beginPath();24 ctx.moveTo(25,25);25 ctx.lineTo(150,25);26 ctx.lineTo(25,150)27 ctx.closePath();28 ctx.stroke();29 30 貝茲路徑 www.j--d.com/bezier31 32 ctx.lineWidth=6;33 ctx.strokeStyle="#ff0000";34 ctx.beginPath();35 ctx.moveTo(0,200);起點36 ctx.quadraticCurveTo(75,50,300,200);節點座標，終點座標|錨點座標37 ctx.stroke();38 39 40 //三次貝茲路徑41 ctx.bezierCurveTo(205,56,239,439,400,250); 第一個節點，第二個節點，錨點座標42 43 儲存恢複canvas狀態44 ctx.fillStyle="#ff0000";45 ctx.strokeStyle="#00ff00";46 cxt.fillRect(20,20,200,100);47 ctx.strokeRect(20,20,200,100);48 ctx.fill();49 ctx.stroke();50 ctx.save();儲存當前的狀態51 52 ctx.fillStyle="#ffffff";53 ctx.strokeStyle="#0000ff";54 ctx.fillRect(200,200,100,50);55 ctx.strokeRect(200,200,100,50);56 ctx.fill();57 ctx.stroke();58 59 ctx.restore(); 恢複狀態,直接調用原來儲存的樣式60 ctx.fillRect(300,300,100,100);61 ctx.strokeRect(300,300,100,100);62 63 縮放64 ctx.scale(0.5,3);  寬度，高度65 位移66 ctx.translate(100,50);67 旋轉68 ctx.rotate(30*Math.PI/180); 參數是弧度69 1度=pi/18070 71 圖形的組合與裁切 www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp72 73 ctx.fillStyle="#ff0000";74 ctx.fillRect(50,25,100,100);75 ctx.globalCompositeOperation="source-in";76 ctx.fillStyle="#00ff00";77 ctx.beginPath();78 ctx.arc(150,125,50,0,Math.PI*2,true);79 ctx.closePath();80 ctx.fill();

 

html5 canvas 學習