实例演示

现在，我们开始通过一个实例来学习使用画布绘制矩形，圆，文本，图片等功能先看看效果：

建立HTML，并增加表格表单

先新建一个HTML的页面，并增加表格表单控件

TweetShirt

canvas{

border:1px solid black;

}

TweetShirt

Please upgrade your browser to use TweetShirt!

选择背景颜色:

白色

黑色

选择图形:

无

圆形

正方形

选择前景颜色:

黑色

白色

JavaScript的处理表单控件

新建一个JavaScript的文件tweetshirt.js，首先启动预览按钮，这样点击这个按钮时它就会调用一个JavaScript的函数来处理画布绘制。

window.onload =function() {

varbutton =document.getElementById("previewButton");

button.onclick = previewHandler;

}

functionpreviewHandler() {

varcanvas =document.getElementById("tshirtCanvas");

varcontext = canvas.getContext("2d");

//绘制图像之前，重置之前绘制的内容

fillBackgroudColor(canvas,context);

//查看界面选择了哪种颜色

varselectObj =document.getElementById("shape");

varindex = selectObj.selectedIndex;//得到表单控件选项的编号的数组

varshape = selectObj[index].value;//得到选项的值

if(shape =="squares") {

for(varsquares =0; squares <20; squares++) {

//绘制正方形

drawSquare(canvas,context);

}

}

if(shape =="circles") {

for(varcircles =0; circles <20; circles++) {

//绘制圆

drawCircle(canvas,context);

}

}

//绘制文本

drawText(canvas,context);

//绘制图片

drawImage(canvas,context);

}

functionfillBackgroudColor(canvas,context) {

varselectObj =document.getElementById("backgroundColor");

varindex = selectObj.selectedIndex;

varbgColor = selectObj[index].value;

//fillStyle保存画布上完成绘制时所用的颜色,它是一个属性而不是方法，所以需要设置而不是调用

context.fillStyle = bgColor;

context.fillRect(0,0,600,200);

}