java 画图 怎么清除已经画出来的图形_H5 Canva画图，希望对小白有帮助

H5的一大特色就是提供了Canvas画布，可以通过JS实现在画布上创建各种图画，甚至通过JS的强大功能实现动态效果。这里主要从Canvas的简单绘图开始，给大家介绍几个函数。此文适合正在学习H5的小学生，中学生，大学生等……

1.1. Canvas介绍

Html5新增标签来定义图形，比如图表和图像，您可以使用脚本(JS)来绘制图形。

标签只是图形容器，您必须使用(JavaScript)脚本来绘制图形。 简单理解：canvas标签可以在网页创建一个块矩形区域，我们可以通过JS代码在这个区域(画布)中绘制图形。

1.2. Canvas使用

下面代码在网页中创建了一个canvas标签，画布宽高为600px,400px。注意canvas不能使用style属性设置宽高，style设置的只是canvas标签的大小，而非画布本身的大小。

你的浏览器不支持Canvas，请更新你的浏览器。

默认情况下这个画布里面什么东西都没有，我们可以给canvas设置一个边框，便于我们查看。

你的浏览器不支持Canvas，请更新你的浏览器。

Canvas标签添加到页面中画布里面没有任何东西，相当于我们准备好了一张白纸。

1.3. 绘制图形

Canvas标签本身并不能绘制图形，绘制图片的工作需要使用 JavaScript来完成。

所以我们需要获取canvas对象，然后通过这个对象上面的方法完成绘制:

1.3.1. 绘制直线

cx.strokeStyle="red";//画笔的颜色

cx.lineWidth=2;//线框

cx.moveTo(500,500); //设置线条的起始位置

cx.lineTo(100, 100); //给路径一个终点

cx.stroke();//开始绘制

1.3.2. 绘制矩形

cx.fillStyle = "blue"; //填充色为蓝色

cx.strokeStyle ="red"; //描边为红色

cx.lineWidth = 2;

cx.fillRect(10, 10, 400, 400); //绘制矩形 fillRect(起点x,起点y,宽度w,高度h);

cx.strokeRect(10, 10, 400, 400); //绘制边框 strokeRect(x,y,w,h);

1.3.3. 绘制圆形

cx.fillStyle = "blue"; //填充色为蓝色

cx.strokeStyle = "red"; //描边为红色

cx.lineWidth = 2;

//绘制圆形 arc(原点x,原点y,半径,起始弧度,结束的弧度,是否是逆时针)

cx.arc(200, 200, 150, 0, Math.PI*2, true); // π

cx.fill(); //填充颜色

cx.stroke(); //绘制

//清除画图

cx.clearRct(x,y,width,height);

案例：使用Canvas完成一个页面画板

1.4. 小结

Canvas标签可以在网页中插入一块画布，随后我们就可以通过JS代码在画布中作画，一般来说以后我们不会直接绘制图形，但是学习这个标签是必须的，因为如果以后看到代码中标签是什么都不知道，那真就丢人了。

实例：(此实例同学还可以在基础上自行补充完善。)

没有胡子的叮当猫，胡子大家可以自己动手试试

画这个图的思路其实很简单，整体来看，就是由若干的圆和线条组成，所以你只要会画圆和画线条，再结合画布中的位置计算(x,y)横纵坐标的计算，就能轻松画出来了。

果果爸爸青少年编程

body{

margin: 0px;

}

#mycanvas{

display: block;

margin: 0px auto;

background: #CCCCCC;

}

window.οnlοad=function(){

//1.找到画布对象

var mycanvas=document.getElementById("mycanvas");

//2.设置画笔

var pen=mycanvas.getContext("2d")

//3.画圆

pen.beginPath()

//arc(x,y,r,start,end,方向)

//4.画头部轮廓

pen.arc(250,250,100,0,Math.PI*2)

pen.strokeStyle="blue"

pen.fillStyle="blue"

pen.fill()

pen.stroke()

pen.beginPath()

//5.脸的轮廓

pen.arc(250,270,80,0,Math.PI*2)

pen.strokeStyle="blue"

pen.fillStyle="white"

pen.fill()

pen.stroke()

//6.画眼睛

pen.beginPath()

pen.arc(235,190,15,0,Math.PI*2)

pen.fillStyle="white"

pen.fill()

pen.strokeStyle="#000000"

pen.stroke()

pen.beginPath()

pen.arc(265,190,15,0,Math.PI*2)

pen.fillStyle="white"

pen.fill()

pen.strokeStyle="#000000"

pen.stroke()

//7.画眼珠

pen.beginPath()

pen.arc(235,200,5,0,Math.PI*2)

pen.fillStyle="#000"

pen.fill()

pen.strokeStyle="#000000"

pen.stroke()

pen.beginPath()

pen.arc(265,200,5,0,Math.PI*2)

pen.fillStyle="#000"

pen.fill()

pen.strokeStyle="#000000"

pen.stroke()

//画鼻子

pen.beginPath()

pen.arc(250,220,10,0,Math.PI*2)

pen.fillStyle="red"

pen.fill()

pen.moveTo(250,230)

pen.lineTo(250,260)

pen.strokeStyle="#000000"

pen.stroke()

//画鼻毛，自己画吧，关键代码已经在这里了。

// pen.moveTo(x,y)设置直线的起点

// pen.LineTo(x,y)设置直线的终点

//画嘴巴

pen.beginPath()

pen.arc(250,270,50,0,Math.PI)

pen.fillStyle="red"

pen.fill()

pen.strokeStyle="#000000"

pen.stroke()

//写文字

pen.font="50px 微软雅黑"

pen.strokeText("我是叮当猫