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/bezier 31 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/180 70 71 圖形的組合與裁切 www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp 72 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();

?

轉載于:https://www.cnblogs.com/xiaozizi/p/5946578.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的html5 canvas 学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。