HTML5 畫(huà)布 Canvas
來(lái)源：程序員人生 發(fā)布時(shí)間：2014-10-06 08:00:00 閱讀次數(shù)：4623次
利用html5的canvas元素使用 JavaScript 在網(wǎng)頁(yè)上繪制圖像。
通過(guò)規(guī)定尺寸、顏色和位置，來(lái)繪制一個(gè)圓：
<!DOCTYPE htma>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #3CF;">
Your browser does not support the canvers element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#3CF";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>
通過(guò)指定從何處開(kāi)始，在何處結(jié)束，來(lái)繪制一條線
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
</body>
</html>
使用您指定的顏色來(lái)繪制漸變背景
<!DOCTYPE htma>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:4px solid #3CF;">
Your browser does not support the canvers element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
</body>
</html>
把一幅圖像放置到畫(huà)布上
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);
</script>
</body>
</html>
生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
