1、Canvas是什么？

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。

畫布是一個矩形區域，您可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

2、創建 Canvas 元素

規定元素的 id、寬度和高度：

<canvas class="canvas" width="200px" height="200px"></canvas>

3、通過 JavaScript 來繪制

canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：

var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); ? cxt.fillStyle="#FF0000"; ? cxt.fillRect(0,0,150,75);

4、通過JavaScript創建canvas

function createCanvas(){ document.body.innerHTML = "" mycanvas =document.getElementByIdx("mycanvas"); context = mycanvas.getContext("2d"); }

5、繪制矩形

function drawRect(){ context.fillStyle="#ff0000"; context.translate(100,200);//移動 context.scale(1,0.5);//縮放 context.rotate(30);//旋轉 context.fillRect(0,0,200,200); }

　　

6、繪制圖像

function drawImage(){ var img = new Image(); img.onload = function(){ context.drawImage(img,0,0);//三個參數圖片源對象、擺放的位置 } img.src = "img/logo.png" }

7、使用Canvas繪制直線

function pageLoad(){var c= $('mycanvas');var ctx = c.getContext('2d');ctx.moveTo(20,30);//第一個起點ctx.lineTo(120,90);//第二個點ctx.lineTo(220,60);//第三個點（以第二個點為起點）ctx.lineTo(250,90);//第四個點（以第二個點為起點）ctx.lineWidth=3;ctx.strokeStyle = 'blue';ctx.stroke();//stroke() 方法會實際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色。
}　

8、繪制漸變曲線

function pageLoad2(){var can = $('mycanvas');var cans = can.getContext('2d');cans.moveTo(0,0);cans.lineTo(400,300);var grd = cans.createLinearGradient(0,0,400,300);//線性漸變的起止坐標grd.addColorStop(0,'red');//創建漸變的開始顏色，0表示偏移量，個人理解為直線上的相對位置，最大為1，一個漸變中可以寫任意個漸變顏色grd.addColorStop(0.5,'green');grd.addColorStop(1,'yellow');cans.lineWidth=20;cans.strokeStyle = grd;cans.stroke();
}

　　

8、繪制一個線性漸變的矩形

function pageLoad2(){var can = $('mycanvas');var cans = can.getContext('2d');cans.moveTo(0,0);cans.lineTo(400,300);var grd = cans.createLinearGradient(0,0,0,100);//線性漸變的起止坐標grd.addColorStop(0,'red');//創建漸變的開始顏色，0表示偏移量，個人理解為直線上的相對位置，最大為1，一個漸變中可以寫任意個漸變顏色grd.addColorStop(0.5,'green');grd.addColorStop(1,'yellow');cans.fillStyle=grd;cans.fillRect(0,0,200,100); }

　　

?

轉載于:https://www.cnblogs.com/hamigua/p/5512667.html

總結

以上是生活随笔為你收集整理的1、Canvas的基本用法的全部內容，希望文章能夠幫你解決所遇到的問題。

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