大佬教程收集整理的这篇文章主要介绍了HTML5 canvas，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
HTML5 <canvas> 是绘制 图形/图像 的容器。它本身并没有绘制能力，您必须使用脚本来完成实际的绘图任务（通常是 JavaScript）。
如果浏览器不支持<canvas>的话，会显示lt;canvas>标签内定义的元素。例如，下面代码在不支持的<canvas>浏览器下就会忽略<canvas>标签，显示<p>标签。
<canvas id="canvas" width="500" height="300" style="border:1px solid #aaa">
<p>Your browser does not support the canvas element!</p>
</canvas>
var canvas = document.getElementById("canvas");
getContext(contextID) 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。该方法需要一个参数，一般是2d，即getContext(‘2d’)。这是为了将来扩展到3d画布保留的一个参数。
var ctx = canvas.getContext('2d');
这样就可以在画布上下文中绘制图案了。
<html>
<body>
<canvas id="canvas" width="250" height="100" style="border:1px solid #aaa">
<p>Your browser does not support the canvas element!</p>
</canvas>
<script type="text/javascript"> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle='#f00'; ctx.fillRect(10,10,100,50); ctx.strokeStyle="#0f0" ctx.strokeRect(130,50); </script>
</body>
</html>
<html>
<body>
<canvas id="canvas" width="280" height="400" style="border:1px solid #aaa">
<p>Your browser does not support the canvas element!</p>
</canvas>
<script type="text/javascript"> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.shadowBlur=0; ctx.shadowColor="black"; ctx.fillStyle='#f00'; ctx.strokeStyle="#0f0" ctx.fillRect(10,50); ctx.strokeRect(130,50); ctx.shadowBlur=20; ctx.fillRect(10,50); ctx.shadowOffsetX=20; ctx.shadowOffsetY=20; ctx.fillRect(10,200,50); ctx.shadowBlur=0; ctx.fillRect(10,300,50); </script>
</body>
</html>
<html>
<body>
<img id="img" src="simayi.jpg" />
<canvas id="canvas1" width="280" height="300" style="border:1px solid #aaa">
<p>Your browser does not support the canvas element!</p>
</canvas>
<canvas id="canvas2" width="280" height="300" style="border:1px solid #aaa;display:none"/>
<script type="text/javascript"> var canvas2 = document.getElementById('canvas2'); var ctx2 = canvas2.getContext('2d'); ctx2.fillStyle="red"; ctx2.fillRect(0,0,260,50); var canvas1 = document.getElementById('canvas1'); var ctx1 = canvas1.getContext('2d'); var img = document.getElementById('img'); img.onload = function() { ctx1.drawImage(img,10); } ctx1.drawImage(canvas2,220); </script>
</body>
</html>
以上是大佬教程为你收集整理的HTML5 canvas全部内容，希望文章能够帮你解决HTML5 canvas所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。