canvas绘制路径

2024-04-27 13:52:44

字体：大中小

来源：转载

供稿：网友

　　路径是绘制自定义图形的好方法，在canvas中通过beginPath()方法开始绘制路径，这个时侯你就可以绘制直线、曲线等，绘制完成后调用 fill()和stroke()完成填充和设置边框，通过closePath()方法结束路径的绘制。下面的例子讲演时如何绘制路径：

    <b>canvas绘制路径</b><br/><canvas id="myCanvas" width="300" height="200"  style="border:1px solid #c3c3c3;">      Your browser does not support the canvas element.      </canvas>      <script type="text/javascript">          var myCanvas = document.getElementById("myCanvas");          if (!myCanvas.getContext)          {              alert("Your browser does not support the canvas element.");          }          else         {              var myContext = myCanvas.getContext("2d");              myContext.fillStyle = '#0000ff';              myContext.strokeStyle = '#ff0000';              myContext.lineWidth = 2;              myContext.beginPath();              myContext.moveTo(30, 30);              myContext.lineTo(150, 30);              myContext.lineTo(150, 120);              myContext.lineTo(90, 100);              myContext.lineTo(120, 60);              myContext.lineTo(30, 30);              myContext.fill();              myContext.stroke();              myContext.closePath();          } </script>

说明

　　１）在获得渲染上下文后，设置了填充色、边框色和边框宽度。
　　２）调用beginPath()方法开始绘制路径
　　３）通过lineTo()方法绘制一个闭合的自定义图形
　　４）调用fill()方法进行填充
　　５）调用stroke()方法设置边框
　　６）调用closePath()方法结束路径的绘制

上一篇：HTML5 canvas简介

下一篇：google chart显示全部顶点的tooltip