返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

利用HTML5 Canvas API绘制矩形的超级攻略

2019-01-28 15:19:14王冬梅
  •         context.lineWidth = 5;            context.strokeStyle = "black";   
  •         context.stroke();      
  •     }    </script>   
  • </body>    </html>   
  • </body>    </html>  

    运行结果：
    2016321105204703.jpg (850×500)

    这个例子结合上节课的讲解，我们知道了绘制路径的时候需要将规划的路径使用beginPath()与closePath()包裹起来。当然，最后一笔可以不画出来，直接使用closePath()，它会自动帮你闭合的。(所以如果你不想绘制闭合图形就不可以使用closePath())

    给矩形上色
    这里我们要介绍一个和stroke()同等重要的方法fill()。和当初描边一样，我们在填色之前，也要先用fillStyle属性选择要填充的颜色。
    比如我们要给上面的矩形涂上黄色，可以这样写。

    JavaScript Code复制内容到剪贴板
    1. <!DOCTYPE html>    <html lang="zh">   
    2. <head>        <meta charset="UTF-8">   
    3.     <title>绘制矩形</title>    </head>   
    4. <body>    <div id="canvas-warp">   
    5.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">            你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    6.     </canvas>    </div>   
    7.    <script>   
    8.     window.onload = function(){            var canvas = document.getElementById("canvas");   
    9.         canvas.width = 800;            canvas.height = 600;   
    10.         var context = canvas.getContext("2d");      
    11.         context.beginPath();            context.moveTo(150,50);   
    • 相关文章 大家在看