這里講解一些canvas的實例demo，大家可以參考著看看，希望對你有一定的幫助。
這里的demo主要是：canvas 繪制路徑 、繪制矩形、繪制文本 、繪制圓形和扇形 、
設置漸變色 、設置漸變色 、圖像處理方法、動畫

HTML代碼

<canvas id="myCanvas" width="400" height="200">您的瀏覽器不支持canvas！</canvas><canvas id="myCanvas2" width="400" height="200">您的瀏覽器不支持canvas！</canvas><canvas id="myCanvas3" width="400" height="200">您的瀏覽器不支持canvas！</canvas><canvas id="myCanvas4" width="400" height="200">您的瀏覽器不支持canvas！</canvas><canvas id="myCanvas5" width="400" height="200">您的瀏覽器不支持canvas！</canvas><canvas id="myCanvas6" width="400" height="200">您的瀏覽器不支持canvas！</canvas><canvas id="myCanvas7" width="400" height="200">您的瀏覽器不支持canvas！</canvas><canvas id="myCanvas8" width="400" height="200">您的瀏覽器不支持canvas！</canvas>

JS代碼

//canvas 繪制路徑 function draw_path(){/* beginPath方法表示開始繪制路徑，moveTo(x, y)方法設置線段的起點，lineTo(x, y)方法設置線段的終點，stroke方法用來給透明的線段著色。*/var canvas = document.getElementById('myCanvas');if (canvas.getContext) {var ctx = canvas.getContext('2d');}else{console.log("不支持canvas");}ctx.beginPath(); // 開始路徑繪制ctx.moveTo(20, 20); // 設置路徑起點，坐標為(20,20)ctx.lineTo(200, 20); // 繪制一條到(200,20)的直線ctx.lineWidth = 1.0; // 設置線寬ctx.strokeStyle = 'red'; // 設置線的顏色ctx.stroke(); // 進行線的著色，這時整條線才變得可見}

---

//繪制矩形function draw_square(){/* fillRect(x, y, width, height)方法用來繪制矩形，它的四個參數分別為矩形左上角頂點的x坐標、y坐標，以及矩形的寬和高。fillStyle屬性用來設置矩形的填充色。*/var canvas = document.getElementById('myCanvas2');if (canvas.getContext) {var ctx = canvas.getContext('2d');}else{console.log("不支持canvas");}ctx.fillStyle = 'yellow';ctx.fillRect(15, 15, 200, 100);/*strokeRect方法與fillRect類似，用來繪制空心矩形。*/ctx.strokeRect(10,10,200,100);/* clearRect方法用來清除某個矩形區域的內容。*/// ctx.clearRect(100,50,50,50); }

---

//繪制文本 /*fillText方法不支持文本斷行，即所有文本出現在一行內。所以，如果要生成多行文本，只有調用多次fillText方法。 */ /* fillText(string, x, y) 用來繪制文本，它的三個參數分別為文本內容、起點的x坐標、y坐標。 */function draw_text(){var canvas = document.getElementById('myCanvas3');if (canvas.getContext) {var ctx = canvas.getContext('2d');}else{console.log("不支持canvas");}ctx.font = "Bold 20px Arial"; // 設置字體ctx.textAlign = "left"; // 設置對齊方式ctx.fillStyle = "#008600"; // 設置填充顏色ctx.fillText("Hello!", 10, 50); // 設置字體內容，以及在畫布上的位置ctx.strokeText("Hello!", 10, 100); // 繪制空心字}

---

//繪制圓形和扇形 function draw_circle(){ /* arc方法用來繪制扇形。*/ /* arc方法的x和y參數是圓心坐標，radius是半徑，startAngle和endAngle則是扇形的起始角度和終止角度（以弧度表示）， anticlockwise表示做圖時應該逆時針畫（true）還是順時針畫（false）。*/var canvas = document.getElementById('myCanvas4');if (canvas.getContext) {var ctx = canvas.getContext('2d');}else{console.log("不支持canvas");}/*實心的圓形。*/ ctx.beginPath();ctx.arc(60, 60, 50, 0, Math.PI*2, true);ctx.fillStyle = "#000000";ctx.fill();/* 繪制空心圓形*/ ctx.beginPath();ctx.arc(70, 75, 50, 0, Math.PI*2, true);ctx.lineWidth = 1.0;ctx.strokeStyle = "#000";ctx.stroke();}

---

//設置漸變色 function set_gradient(){/* createLinearGradient方法用來設置漸變色。*//* createLinearGradient方法的參數是(x1, y1, x2, y2)，其中x1和y1是起點坐標，x2和y2是終點坐標。通過不同的坐標值，可以生成從上至下、從左到右的漸變等等。*/var canvas = document.getElementById('myCanvas5');if (canvas.getContext) {var ctx = canvas.getContext('2d');}else{console.log("不支持canvas");}var myGradient = ctx.createLinearGradient(0, 0,0, 160);myGradient.addColorStop(0, "#BABABA");myGradient.addColorStop(1, "#636363");ctx.fillStyle = myGradient;ctx.fillRect(10,10,200,100);}

---

//設置陰影function set_shdow(){var canvas = document.getElementById('myCanvas6');if (canvas.getContext) {var ctx = canvas.getContext('2d');}else{console.log("不支持canvas");}ctx.fillRect(20, 20, 200, 100);ctx.shadowOffsetX = 10; // 設置水平位移ctx.shadowOffsetY = 10; // 設置垂直位移ctx.shadowBlur = 5; // 設置模糊度ctx.shadowColor = "rgba(0,0,0,0.5)"; // 設置陰影顏色ctx.fillStyle = "#CC0000";ctx.fillRect(10,10,200,100);}

---

//圖像處理方法function draw_img(){/* drawImage()方法接受三個參數，第一個參數是圖像文件的DOM元素（即<img>節點），第二個和第三個參數是圖像左上角在畫布中的坐標，上例中的(0, 0)就表示將圖像左上角放置在畫布的左上角。*//*Canvas API 允許將圖像文件插入畫布，做法是讀取圖片后，使用drawImage方法在畫布內進行重繪。*/var image = new Image();image.onload = function() {var canvas = document.createElement('canvas');canvas.width = image.width;canvas.height = image.height;canvas.getContext('2d').drawImage(image, 0, 0);// 插入頁面底部document.body.appendChild(image);return canvas;}image.src="http://b283.photo.store.qq.com/psb?/V12aHQSq3jz8sw/3*2yjqipjT41VxRUDUS.fiTmAX*gBLM.kL51i1SKoLU!/b/dBsBAAAAAAAA&bo=gALAAgAAAAAFAGM!&rf=viewer_4&t=5";// drawImage()方法接受三個參數，第一個參數是圖像文件的DOM元素（即<img>節點），第二個和第三個參數是圖像左上角在畫布中的坐標，// 上例中的(0, 0)就表示將圖像左上角放置在畫布的左上角。}

---

//動畫function cartoon(){/* 每隔30毫秒就向右下方移動的效果。setInterval函數的一開始，之所以要將畫布重新渲染黑色底色，是為了抹去上一步的小圓點。*/var canvas = document.getElementById('myCanvas8');if (canvas.getContext) {var ctx = canvas.getContext('2d');}else{console.log("不支持canvas");}var posX = 20,posY = 100;setInterval(function() {ctx.fillStyle = "black";ctx.fillRect(0,0,canvas.width, canvas.height);posX += 1;posY += 0.25;ctx.beginPath();ctx.fillStyle = "white";ctx.arc(posX, posY, 10, 0, Math.PI*2, true);ctx.closePath();ctx.fill();}, 10);}

總結

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

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