canvas是html5新增的一个专用于图形处理的标签，利用canvas可以实现大部分图形操作canvas的一些基本操作与其他图形编程工具类似，包含：各种形状的边框、路径绘制和填充，画布属性调整，样式调整等下面逐步引入，笔者叙述的尽量详细，争取让一个新手能轻松理解一、canvas环境构建进入html编辑环境即可。在body中添加canvas标签[html]
这样就完成了一个canvas的铺设,但这样是远远不够的，在运用canvas之前还必须做一些工作，包括变量关联和上下文的创建[html]$(document).ready(function(){ var canvas=$("#canvas1"); //变量关联 var context=canvas.get(0).getContext("2d"); //创建上下文 context.clearRect(0,0,400,200); //画矩形});二、画图的方法有多种，几种典型方法如下[html]context.fillRect(20,20,100,100); //填充context.strokeRect(130,20,100,100); //边框[html]context.beginPath(); context.strokeRect(30,100,50,50);//勾画路径 context.closePath(); context.stroke();//路径的使用方式[html]context.beginPath(); context.arc(155,125,20,0,Math.PI*1.5,false);//画圆（扇） //context.arc(x,y,radius,开始角度，结束角度,方向是否逆时针) context.closePath(); context.fillStyle="#ffff00";//调整样式 context.fill();[html]var text="hello world!"; context.font="35px italic serif";//设置字体属性 context.fillText(text,60,100);[html]canvas.attr("width",400);//修改画布大小 canvas.attr("height",20);[html]context.clearRect(0,0,canvas.width(),canvas.height());//修改画布大小三、实例，下面提供一个完整的各种canvas基础应用的demo源码[html]canvas 1 矩形绘制：
canvas 2 路径绘制：
canvas 3 颜色和线宽调整：
canvas 4 文本绘制：
canvas 5 测试改动一个canva属性值并抹黑

作者：goodcat12