HTML5 搬动开发 - Canvas 绘图 9.1 矩形，填充三角形

2013-10-08

HTML5 移动开发 --Canvas 绘图9.1矩形，填充三角形渐变!DOCTYPE htmlhtmlheadmeta charsetutf-8

HTML5 移动开发 -- Canvas 绘图 9.1 矩形，填充三角形
渐变

<!DOCTYPE html>

<html>
<head><meta charset='utf-8'></head>
<body>
    
    <canvas id='a_canvas' width='300' height='300'></canvas>
    <script type="text/javascript">
      // 2.获取canvas duix
      var canvas = document.getElementById('a_canvas');
      // 3.由canvas获取绘图的上下文
      var ctx =canvas.getContext('2d');
      // 4.使用属性绘图
      ctx.fillStyle = 'rgb(255,0,0)';
      ctx.fillRect(50,50,200,200);
      ctx.fillStyle = 'rgba(0,0,255,0.5)';
      ctx.fillRect(100,100,200,200);
    </script>
</body>

</html>

HTML5 搬动开发 - Canvas 绘图 9.1 矩形，填充三角形

填充三角形

<!DOCTYPE html>
<html>
<head><meta charset='utf-8'></head>
<body>
    
    <canvas id='a_canvas' width='300' height='300'></canvas>
    <script type="text/javascript">
      // 2.获取canvas duix
      var canvas = document.getElementById('a_canvas');
      // 3.由canvas获取绘图的上下文
      var ctx =canvas.getContext('2d');
      // 4.使用属性绘图

      //开始绘制
      ctx.beginPath();

      // 绘图的基点
      ctx.moveTo(0,0);
      //绘制从前一次到这个点的直线
      ctx.lineTo(0,290);
      ctx.lineTo(290,290);

      //结束绘制
      ctx.closePath();

      // 进行绘图处理
      ctx.fillStyle = 'rgba(200,0,0,0.5)';
      // 填充路径
      ctx.fill();

    </script>
</body>

</html>

HTML5 搬动开发 - Canvas 绘图 9.1 矩形，填充三角形

热点排行