实例演示
现在，我们开始通过一个实例来学习使用画布绘制矩形，圆，文本，图片等功能先看看效果：
建立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);
}
