来源：自学PHP网 时间：2015-01-26 11:14 作者： 阅读:次
[导读] 有两种形式，一种是描边（fill），一种是填充（stroke），具体的实现代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助...
|
有两种形式，一种是描边（fill），一种是填充（stroke），具体的实现代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
复制代码 代码如下:<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> 效果图： 
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
