canvas 绘制矩形

矩形绘制：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/ecmascript">
function draw(){
    
    var canvas=document.getElementById("test");
    if(canvas.getContext){
        
        var ctx=canvas.getContext("2d");
            ctx.fillStyle="rgb(200,200,0)";         //背景色rgb
            ctx.fillRect(10,10,100,100)；           //相对矩形的坐标  绘制矩形的宽高
            ctx.fillStyle="rgba(0,200,0,0.5)";    //背景半透明
            ctx.fillRect(50,50,100,100);                 // 相对矩形的坐标  绘制矩形的宽高
        };
    };
</script>
</head>

<body onLoad="draw();">
<canvas id="test" width="150" height="150"></canvas>
</body>

矩形内部清空部分区域+边框设置：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/ecmascript">
function draw(){
    
    var canvas=document.getElementById("test");
    if(canvas.getContext){
        
        var ctx=canvas.getContext("2d");
            ctx.fillStyle="rgb(200,200,0)";                //矩形填充色
            ctx.strokeStyle="red"                            //边框颜色
            ctx.fillRect(10,10,100,100);                      //矩形位置坐标，矩形宽高  
            ctx.clearRect(30,30,60,60);                    //矩形内清空一个矩形的大小，位置，宽高
            ctx.strokeRect(35,35,50,50);                    //边框的位置，边框的宽高

        };
    };
</script>
</head>

<body onLoad="draw();">
<canvas id="test" width="150" height="150"></canvas>
</body>

posted on 2013-12-14 17:54 熏风阅读(293) 评论(0) 编辑收藏举报