溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下HTML5中如何使用canvas，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
<canvas>新元素
<canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成.
<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。
你可以通過多種方法使用Canva繪制路徑,盒、圓、字符以及添加圖像。
注意: 默認情況下 <canvas> 元素沒有邊框和內容。
畫方
<!--fillStyle是填充樣式，如果不設置fillStyle屬性，默認填充色為黑色，fillRect是畫一個矩形，參數為X,Y,Width,Height--><!DOCTYPE html><html><head><meta charset="UTF-8" name="author" content="趙慧娟"><title></title><script src="Scripts/jquery-1.10.2.js?1.1.10"></script><script type="text/javascript">$(function(){var canvas=document.getElementById("myCanvas")var ctx=canvas.getContext("2d");
ctx.fillStyle="deeppink";
ctx.fillRect(10,10,100,100);
//ctx.moveTo(0,0); //定義開始坐標
//ctx.lineTo(100,100); //定義結束坐標
//ctx.stroke(); //繪制線條})</script></head><body><canvas id="myCanvas" width="100" height="100"></canvas></body></html>
運行結果：
畫圓
<!--arc畫圓，參數是X,Y,半徑，起始角，結束角，順時針/逆時針(可選)XY指的是圓點的距離--><!DOCTYPE html><html><head><meta charset="UTF-8" name="author" content="趙慧娟"><title></title><script src="Scripts/jquery-1.10.2.js?1.1.10"></script><script type="text/javascript">$(function(){var canvas=document.getElementById("myCanvas")var ctx=canvas.getContext("2d");
ctx.fillStyle="deeppink";
ctx.arc(50,50,50,0,2*Math.PI);
ctx.stroke();
})</script><style type="text/css">canvas{border: 1px solid #000;}</style></head><body><canvas id="myCanvas" width="100" height="100"></canvas></body></html>運行結果：
漸變
createLinearGradient(x,y,x1,y1) - 創建線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變
// 創建漸變var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"blue"); // 填充漸變ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
運行結果：
徑向/圓漸變
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 創建漸變
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充漸變
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);運行結果：
圖像
<!DOCTYPE html><html><head><meta charset="UTF-8" name="author" content="趙慧娟"><title></title><script src="Scripts/jquery-1.10.2.js?1.1.10"></script><style type="text/css">canvas{border: 1px solid #000;}#flower{border: 1px solid #000;width: 100px;height: 100px;}</style></head><body><img src="img/a.ico" id="flower" /><canvas id="myCanvas" width="100" height="100"></canvas><script type="text/javascript">$(function(){var canvas=document.getElementById("myCanvas")var ctx=canvas.getContext("2d");var img=document.getElementById("flower");
img.onload=function(){
ctx.drawImage(img,20,20,80,80); //drawImage（對象，X,Y，W,H）}
})</script></body></html>運行結果：
（右圖為canvas圖像）
以上是“HTML5中如何使用canvas”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
