html5的画布canvas——画出简单的矩形、三角形实例代码
导读：收集整理的这篇文章主要介绍了html5的画布canvas——画出简单的矩形、三角形实例代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 首先在htML页面中放置一个canvas元素，其中canvas元素应该具备三个属性ID、...
收集整理的这篇文章主要介绍了html5的画布canvas——画出简单的矩形、三角形实例代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 首先在htML页面中放置一个canvas元素，其中canvas元素应该具备三个属性ID、width、height。 复制代码代码如下:
canvas id="demo" width="600" height="600"> /canvas>
取得canvas对象并取得上下文VAR cxt=document.getElementById('demo').getContext("2d"); 其中参数2d是确定的。
开始绘制，有两种形式，一种是描边（fill），一种是填充（stroke）。
javascript代码：
复制代码代码如下:
script language="javascript">
var cxt=document.getElementById('demo').getContext("2d");
cxt.beginPath();
cxt.fillStyle="#F00"; /*设置填充颜色*/
cxt.fillRect(0,0,200,100); /*绘制一个矩形，前两个参数决定开始位置，后两个分别是矩形的宽和高*/
cxt.beginPath();
cxt.strokeStyle="#000"; /*设置边框*/
cxt.lineWidth=3; /*边框的宽度*/
cxt.strokeRect(0,120,200,100);
cxt.beginPath();
cxt.moveTo(0,350);
cxt.lineto(100,250);
cxt.lineTo(200,300);
cxt.closePath(); /*可选步骤，关闭绘制的路径*/
cxt.stroke();
/script>
效果图：
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： html5的画布canvas——画出简单的矩形、三角形实例代码
本文地址： https://pptw.com/jishu/585196.html