利用HTML5 Canvas API绘制矩形的超级攻略_html5教程技巧

使用closePath()闭合图形
首先我们用最普通的方法绘制一个矩形。

JavaScript Code复制内容到剪贴板

1. nbsp;html>   
2. "en">   
3.   
4.      "UTF-8">   
5.        
6.   
7.   
8. nbsp;html>   
9. "zh">   
10.   
11.      "UTF-8">   
12.        
13.   
14.   
15. "canvas-warp">   
16.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
17.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
18.        

  

  

<script> </script>

    window.onload = function(){   

        var canvas = document.getElementById("canvas");   

        canvas.width = 800;   

        canvas.height = 600;   

        var context = canvas.getContext("2d");   

  

        context.beginPath();   

        context.moveTo(150,50);   

        context.lineTo(650,50);   

        context.lineTo(650,550);   

        context.lineTo(150,550);   

        context.lineTo(150,50);     //绘制最后一笔使图像闭合   

        context.lineWidth = 5;   

        context.strokeStyle = "black";   

        context.stroke();   

  

    }