使用Canvas绘制基础形状-优快云博客

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<style>
body{
	background:#808080;
}

#canvas{
	background:#ffffff;
}
</style>
<script>
window.onload = function(){
    //获取canvas元素
    var canvas = document.getElementById('canvas');     
    //获取2d绘图环境
    var cxt = canvas.getContext('2d');      

    cxt.fillRect(1,1,50,50);
    cxt.strokeRect(51,51,50,50);
    cxt.fillRect(101,101,50,50);
    cxt.strokeRect(150,150,50,50);
    cxt.fillRect(200,200,50,50);
    cxt.fillRect(250,250,50,50);
    cxt.strokeRect(300,300,50,50);
    cxt.fillRect(350,350,50,50);
    cxt.fillRect(448,448,50,50);
    cxt.strokeRect(399,399,50,50);

    cxt.strokeRect(448,2,50,50);
    cxt.fillRect(399,51,50,50);
    cxt.strokeRect(349,101,50,50);
    cxt.fillRect(299,151,50,50);
    cxt.strokeRect(250,201,49,49);
    cxt.strokeRect(201,250,49,49);
    cxt.fillRect(151,299,50,50);
    cxt.strokeRect(101,349,50,50);
    cxt.fillRect(51,399,50,50);
    cxt.strokeRect(2,448,50,50);
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500">您的浏览器不支持canvas元素</canvas>
</body>
</html>

效果图：