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>

 

你可能感兴趣的:(canvas 绘制矩形)