html 绘制正方形,HTML5之Canvas画正方形

HTML5之Canvas画正方形

1、设计源码

HTML5之Canvas画正方形

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);

}

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);

原文：http://blog.csdn.net/you23hai45/article/details/44262719