標籤：元素 學習 調用 creat 注意 寫法 offset window start
1.什麼是Canvascanvas就是一個畫布，可以進行畫任何的線，圖形，填充等一系列操作。這一切都是用Js操作的，另外Canvas不僅僅提供簡單的二維向量繪圖，也提供了三維的繪圖，以及圖片處理等一系列的api支援。
建立canvas標籤
<!--建立canvas元素--><canvas id="myCanvas"></canvas>
上面的標籤只是一個畫布，Id屬性是必須的，後面要用Id來拿到當前的Canvas的Dom對象。通過此Canvase的Dom對象就可以擷取他的上下文了，Canvas繪製圖形都是靠著Canvas對象的內容物件.
var myCanvas;window.onload = function() { myCanvas = document.getElementById("myCanvas"); //擷取上下文 var context = myCanvas.getContext("2d"); }
Context預設的有兩種繪製模式：第一種繪製線(stroke) 第二種填充(fill)
使用canvas 畫一個
Canvas繪製的總體的步驟建立HTML頁面，設定畫布標籤編寫js，擷取畫布dom對象通過Canvas標籤的Dom對象擷取上下文設定繪製線樣式、顏色繪製矩形，或者填充矩形
使用canvas繪製矩形
<body> <!--建立canvas元素--> <canvas id="myCanvas10" width="500" height="500"></canvas> <script> var mycanvas = document.getElementById("myCanvas10"); //擷取上下文 var context = mycanvas.getContext("2d"); //設定繪畫模式 context.strokeStyle = "#FF0000"; context.setLineWidth(1); //繪製矩形 context.strokeRect(10,10,100,100); //填充模式 context.fillStyle = "blue"; context.fillRect(10,120,100,100); </script> </body>
使用canvas繪製圖片
var mycanvas = document.getElementById("myCanvas10"); //擷取上下文 var context = mycanvas.getContext("2d"); var image = new Image(); image.src = "../img/[email protected]"; //當圖片載入完成後 image.onload = function() { context.drawImage(image,10,10); }使用canvas繪製線條
Context對象的beginPath方法表示開始繪製路徑，moveTo(x, y)方法設定線段的起點，lineTo(x, y)方法設定線段的終點，stroke方法用來給透明的線段著色。moveto和lineto方法可以多次使用。最後，還可以使用closePath方法，自動繪製一條當前點到起點的直線，形成一個封閉圖形，省卻使用一次lineto方法。
var myCanvas = document.getElementById("myCanvas10");
var context = myCanvas.getContext("2d");
//開始慧子路徑
context.beginPath();
//設定線寬
context.setLineWidth(5);
context.strokeStyle = "#CC0000"; // 設定線的顏色
context.moveTo(10,10);
context.lineTo(10,60);
context.lineTo(70,10);
//設定兩條線頂端的模式
context.lineCap = "round";
//設定兩條線相交的模式
context.lineJoin = "round";
//如果只畫兩條線 使之稱為閉合空間
context.closePath();
context.stroke();
使用Canvas繪製文本
Context內容物件的fillText(String,x,y)方法是用來繪製文本的，他的三個參數分別為常值內容，起點座標x 起點座標y 需用font設定字型、大小、樣式（寫法類似與CSS的font屬性）。與此類似的還有strokeText方法，用來添加空心字。另外注意一點：fillText方法不支援文本斷行，即所有文本出現在一行內。所以，如果要產生多行文本，只有調用多次fillText方法。
var myCanvas = document.getElementById("myCanvas10"); var context = myCanvas.getContext("2d"); context.font = "Bold 20px Arial"; context.textAlign = "left"; context.fillStyle = "#FF0000"; context.fillText("天下第一快",10,30);
效果：
使用Canvas繪製圓和橢圓在上一篇文章中，筆者已經跟大家介紹過了繪製矩形，繪製其他形狀，比如圓形等，都是一個思路，只不過是方法不同罷了。那接下裡給各位示範一小繪製圓形和橢圓。Context內容相關的arc方法就是繪製圓形或者橢圓，arc方法的x和y參數是圓心座標，radius是半徑，startAngle和endAngle則是扇形的起始角度和終止角度（以弧度表示），anticlockwise表示做圖時應該逆時針畫（true）還是順時針畫（false）。
<canvas id="demoCanvas" width="500" height="600"></canvas> <script type="text/javascript"> //通過id獲得當前的Canvas對象 var canvasDom = document.getElementById("demoCanvas"); //通過Canvas Dom對象擷取Context的對象 var context = canvasDom.getContext("2d"); context.beginPath();//開始繪製路徑 //繪製以 （60,60）為圓心，50為半徑長度，從0度到360度（PI是180度），最後一個參數代表順時針旋轉。 context.arc(60, 60, 50, 0, Math.PI * 2, true); context.lineWidth = 2.0;//線的寬度 context.strokeStyle = "#000";//線的樣式 context.stroke();//繪製空心的，當然如果使用fill那就是填充了。 </script>使用canvas設定漸層色
createLinearGradient方法用來設定漸層色。
設定漸層色 var myCanvas = document.getElementById("myCanvas10"); var context = myCanvas.getContext("2d"); //createLinearGradient方法的參數是(x1, y1, x2, y2)，其中x1和y1是起點座標，x2和y2是終點座標。 //通過不同的座標值，可以產生從上至下、從左至右的漸層等等 var myGradient = context.createLinearGradient(0,0,0,160); myGradient.addColorStop(0,"#FF0000"); myGradient.addColorStop(0.5,"#BABABA"); myGradient.addColorStop(1,"#00FF00"); context.fillStyle = myGradient; context.fillRect(10,10,200,200);：
使用Canvas繪製陰影
繪製陰影 context.shadowOffsetX = 10;//設定水平位移 context.shadowOffsetY = 10;//設定垂直位移 context.shadowBlur = 5;//設定模糊程度 context.shadowColor = "#cc0000"; context.fillStyle = "red"; context.fillRect(10,10,200,100);
//save方法用於儲存上下文環境，restore方法用於恢複到上一次儲存的上下文環境。
ctx.save(); ctx.shadowOffsetX = 10;ctx.shadowOffsetY = 10;ctx.shadowBlur = 5;ctx.shadowColor = rgba(0,0,0,0.5);ctx.fillStyle = #CC0000;ctx.fillRect(10,10,150,100);ctx.restore(); ctx.fillStyle = #000000;ctx.fillRect(180,10,150,100);
//先用save方法，儲存了當前設定，然後繪製了一個有陰影的矩形。接著，使用restore方法，恢複了儲存前的設定.
參考部落格 http://www.2cto.com/kf/201502/376960.html
HTML 學習筆記 (canvas 基礎)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
