canvas基础练习（画矩形）

来源：互联网发布：平板电脑可以做淘宝吗编辑：程序博客网时间：2024/05/17 09:17

<!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绘图环境       cxt = canvas.getContext('2d');                //画矩形            //设置绘图样式                //画笔填充样式       cxt.fillStyle = 'red';                //画笔描边样式       cxt.strokeStyle = 'blue';       cxt.lineWidth = '10';       cxt.lineJoin = 'round';  //圆角       //cxt.lineJoin = 'bevel';  //斜角                   //画笔填充、描边   //顺序转换可重叠覆盖       cxt.fillRect(100,100,50,50);       cxt.strokeRect(95,95,60,60);     }</script></head><body><canvas id="canvas" width="500" height="500"></canvas></body></html>

效果图：

0 0