canvas基础练习

来源：互联网发布：微信回调域名编辑：程序博客网时间：2024/05/16 11:47

<!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>

效果图：

0 0