<br> // 想要在Cavnas上面画图，就需要用JavaScript <br> // 2. 取得绘图工具：我们可以从canvas标签上获取一个绘图对象（上下文对象）， <br> // 绘图的各种方法和设置，都放在这个对象上. <br> var cvs = document.getElementById('cvs'); <br> var ctx = cvs.getContext('2d'); // 获取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 = 'lightgreen'; // 设置描边的颜色为绿 <br> ctx.lineWidth = 25; // 设置描边的线条宽度 <br> ctx.stroke(); // 描边 <br><br> ctx.fillStyle = 'pink'; <br> ctx.fill(); // 填充</p>
