路径描边设置样式

 

<script> <br/> // 想要在cavnas上面画图，就需要用javascript <br/> // 2. 取得绘图工具：我们可以从canvas标签上获取一个绘图对象（上下文对象）， <br/> // 绘图的各种方法和设置，都放在这个对象上. <br/> var cvs = document.getelementbyid(&#39;cvs&#39;); <br/> var ctx = cvs.getcontext(&#39;2d&#39;); // 获取canvas2d绘图工具 <br/> // 3. 绘制路径。 <br/> ctx.moveto(50,50); // 把“钢笔”移动到图像的某个位置上 <br/> ctx.lineto(150,50); // 用“钢笔”连线到某个点上 <br/> ctx.lineto(150,150); <br/> ctx.lineto(50,150); <br/> ctx.lineto(50,50); <br/> // 现在我们的canvas上还什么都没有呢，为什么？ 因为moveto和lineto是用来绘制路径的。 <br/> // 路径是用来描述我们想要绘制的形状或者线条的“草稿” <br/> // 4. 填充或者描边路径。 <br/> // 在描边或者填充之前，我们可以设置描边或者填充的颜色。 <br/> // canvas是“画过之后浏览器就不管他了”的机制， <br/> // 所以我们想要设置描边或者填充的样式，必须在描边或者填充之前 <br/> // 如果我们已经描边或者填充了，再去设置样式，是不管用的 <br/><br/> ctx.strokestyle = &#39;lightgreen&#39;; // 设置描边的颜色为绿 <br/> ctx.linewidth = 25; // 设置描边的线条宽度 <br/> ctx.stroke(); // 描边 <br/><br/> ctx.fillstyle = &#39;pink&#39;; <br/> ctx.fill(); // 填充</script>