html5canvas绘制矩形和圆形的实例代码.pdfVIP

下面小编就为大家带来一篇 html5 canvas 绘制矩形和圆形的实例代码。 小编觉得挺不错 的，现在就分享给大家，也给大家做个参考。 html5 canvas 绘制矩形和圆形的实例代码 JavaScript Code lt;!DOCTYPE htmlgt; nbsp;nbsp; lt;htmlgt; nbsp;nbsp; nbsp; nbsp; lt;headgt; nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; lt;meta charset=UTF-8gt; nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; lt;titlegt;lt;/titlegt; nbsp;nbsp; nbsp; nbsp; lt;/headgt; nbsp;nbsp; nbsp; nbsp; lt;body onload=draw(),drawarc()gt; nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; lt;!-- 绘制的步骤： 获取 canvas 元素 -gt; 取得上下文 -gt; 填充与绘制边框 -gt; 设定绘图样式 --gt; nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; lt;!-- 绘制其他复杂图形需要使用路径：开始创建路径 -gt; 创建图形路径 -gt; 关闭路径 -gt; 绘制图形 --gt; nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; lt;!--eg: 绘制矩形 --gt; nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; 绘制矩形 :lt;canvas id=cagt;lt;/canvasgt;lt;br /gt; nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; 绘 制 圆 形 ： lt;canvas id=yuangt;lt;/canvasgt; nbsp;nbsp; nbsp; nbsp; lt;/bodygt; nbsp;nbsp; lt;/htmlgt; nbsp;nbsp; lt;scriptgt; nbsp;nbsp; nbsp; nbsp; // 绘制矩形 nbsp;nbsp; nbsp; nbsp; function draw(){ nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; var canvas=document.getElementById(ca); // 获取 canvas 元 素 nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; if (canvas==null) nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return false; nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; var context=canvas.getContext(2d); // 取 得 上 下 文 nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; context.fillStyle=#EEEFF; nbsp; // 填 充 颜 色 nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; context.fillRect(0,0,400,300); // 填 充 矩 形 ( 矩 形 1) nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; context.fillStyle=red; nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; context.strokeStyle=blue; // 边框颜色 nbsp;nbsp; nbsp; nbsp; nbsp; nbsp; context.lineWidth=1; nbsp; nbsp; nbsp;