1 2 3 | <canvas id="canvas" width="300" height="200"> Fallback content, in case the browser does not support Canvas. </canvas> |
1 | document.getElementById("canvas").width = document.getElementById("canvas").width; |
1 | var context = document.getElementById("canvas").getContext("2d"); |
1 2 3 4 5 6 7 8 9 10 11 12 | function drawRect(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // 获取 2D 渲染上下文 ctx.clearRect(0,0,300,200) ;// 清除以(0,0)为左上坐标原点,300*200 矩形区域内所有像素 ctx.fillStyle = '#00f'; // 设置矩形的填充属性,#00f 代表蓝色 ctx.strokeStyle = '#f00'; // 设置矩形的线条颜色,#f00 代表红色 ctx.fillRect(50,25,150,80); // 使用 fillStyle 填充一个 150*80 大小的矩形 ctx.strokeRect(45,20, 160, 90); // 以 strokeStype 属性为边的颜色绘制一个无填充矩形 } } |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |