HTML5之Canvas画正方形
1、设计源码
<!DOCTYPE html><head><meta charset="utf-8" /><title>HTML5之Canvas画正方形</title><script type="text/javascript"> function drawFour(id){//获取canvas元素var canvas = document.getElementById("canvas");if(canvas == null) return false;//获取上下文var context = canvas.getContext('2d');//设定填充图形的样式context.fillStyle = "#EEEEFF";//绘制图形context.fillRect(0,0,800,800);context.fillStyle = "yellow";//设定图形边框的样式context.strokeStyle = "blue";//指定线宽context.lineWidth = 150;context.fillRect(50,50,500,500);context.strokeRect(50,50,500,500);}</script></head><body onLoad="drawFour('canvas')"> <canvas id="canvas" width="1200" height="560"/></body>
2、设计结果
3、分析说明
（1）获取Canvas元素
var canvas = document.getElementById("canvas");
（2）取到上下文
var context = canvas.getContext('2d');
（3）填充绘制边框
context.fillStyle = "#EEEEFF";//填充的样式
（4）设定绘图样式
strokeStyle：图形边框的样式
（5）指定线宽
context.lineWidth = 150;
（6）指定颜色值
（7）绘制正方形
context.fillRect(50,50,500,500);
context.strokeRect(50,50,500,500);