制作简单的画图板图纸
参见图：代码如下：
复制代码代码如下所示：
简单的画图板
# eraseimg { / / /橡胶* * * /风格
边界：固体；
颜色：灰色；
边界半径：118px；
宽度：5px；
身高：5px；
位置：绝对；
显示：无；
}
在橡胶/大小。eraseseries {单选按钮组的安排，这个div不是单行线。
显示：内联块；
}
到2D板
var绘画= false；是确定是否绘画，即鼠标左键按下。
var画布；
$（函数（）{（））
$（。eraseseries ）（隐藏）； / /单选按钮组的初始状态。
画布document.getelementbyid（myCanvas）；
C = canvas.getcontext（2D）；
c.linecap =圆； / /手写笔迹的边缘，否则会出现故障
c.strokestyle = 黑； / /笔迹颜色
c.linewidth = 5； / /手写的厚度
$（#颜色）（。变化（功能）{ / /书写的颜色变化
如果（eraseflag = =真） / /皮状态
{
$（#擦除）。Trigger（点击）； / /橡胶自动触发点击，回到刷状态
}
c.strokestyle = $（this）（。Val）； / /设置画笔的状态
c.linewidth = $（this）瓦迩（）；
}）；
$（#字体）（。变化（功能）{ / /刷厚度变化
如果（eraseflag = =真） / /。
{
$（#擦除）。Trigger（点击）；
}
c.linewidth = $（this）瓦迩（）；
c.strokestyle = $（#色）的瓦迩（）；
/ / eraseflag = false；
}）；
$（。eraseseries ）（点击（功能）{ / /橡皮大小的变化
无功大小= $（输入{名称=erasesize}：检查）（。Val）； / /单选按钮组中选择橡胶的价值
尺码=大小； / /值的全局变量，尺码需要用来控制橡胶形成的位置
c.linewidth =尺寸；
$（# eraseimg）。Css（{宽度：规模+PX
}）；
$（#擦除）（。切换（功能）{ / /橡胶按钮的单击事件
（c.save）； / /保持状态的最后
eraseflag =真；
c.strokestyle =白色；
$（#擦除）。文本（刷）； / /改变按钮上的文字
$（。eraseseries ），（'fast '）； / /橡胶广播集团
/ / $（# eraseimg ）（显示）；
尺码= 5；
}函数（）{（）
eraseflag = false；
$（#擦除）。文本（橡胶）；
$（。eraseseries ）隐藏（'fast）；
（c.restore）； / /恢复刷状态（包括颜色、厚度等）
}）；
/ / setInterval（油漆，2）；
}）；
无功p_x； / /最后的鼠标位置
无功p_y；
无功p_x_now； / /现在鼠标的位置
无功p_y_now；
无功eraseflag = false；
VaR的尺码； / /橡胶的尺寸
$（document）。Mousedown（function（e）{ / /鼠标点击事件触发
/ /警报（尺码）；
p_x = e.clientx； / /到最后的位置，鼠标的位置并置
p_y = e.clienty；
绘画= true；
}）；
$（document）。Mousemove（function（e）{ / /鼠标触发事件
如果（eraseflag = =真的e.clienty > 30） / /橡胶活性，和Y鼠标位置大于30，这是在绘图板的鼠标
{
跟随鼠标移动图像橡皮
$（# eraseimg）。动画（{左：e.clientx-sizee +PX
}
其他的
{
$（# eraseimg ）隐藏（'fast）；
}
如果（画笔= TRUE）在画笔激活
{
警告（1）；
p_x_now = e.clientx； / /现在鼠标的位置
p_y_now = e.clienty；
（c.beginpath）； / /路径
曲线是一条很小的直线，计算速度很快，这是一种线性迭代曲线绘制方式。
C.moveTo（p_x-5-canvas.offsetleft，p_y-5-canvas。offsettop）； / /移动到起点
C.lineTo（p_x_now-5-canvas.offsetleft，p_y_now-5-canvas。offsettop）； / /结束点从出发点到直线
C.stroke（）；
（c.closepath）； / /封闭的路径，这是非常重要的，如果路径不封闭，
只要画布的颜色改变，所有的画都会在颜色改变之前。
p_x = p_x_now； / /一次迭代后的电流瞬时值的坐标被分配到最后的鼠标坐标
p_y = p_y_now；
}
}）；
$（document）。Mouseup（function（e）{ / /鼠标释放的触发事件
绘画=假；
}）；
红色
黄色的
蓝色
黑色
绿色
五
十
十五
二十
三十
擦皮
五
十
十五
二十
三十
按钮-->