Canvas想要清空当前画布的方法很简单
使用 obj.clearRect(x,y,width,height);
四个参数意思是想要清空哪个坐标点,宽高多少的画布面积;
Canvas时钟demo
Canvas倒计时demo
********************************************************
总结canvas
什么是 Canvas?
HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.
标签只是图形容器,您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。
浏览器支持
ie9+
创建画布
<canvas id="myCanvas" width="200" height="100"></canvas>
Canvas的绘制必须在js中进行,
1.首先要获取Canvas元素
2.创建context对象(context对象包含多种绘制路径、矩形、圆形、字符以及添加图像的方法
var ctx = myCanvas.getContext(‘2d’);)
Context属性:
1.fillStyle(CSS颜色,渐变,或图案。fillStyle默认设置是#000000(黑色));
Canvas路径绘制
1.moveTo(x,y) 起始位置
2.lineTo(x,y) 结束位置
3.stroke()绘制
canvas画圆
arc(x,y,r,start,stop)
ctx.beginPath();(初始化)
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();(绘制)
Canvas文本
font=’size Arial’;设置字体大小与样式
fillText(‘文本’,x,y); 绘制实心字体
strokeText(’文本’,x,y)绘制空心字体
Canvas渐变
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.
例如
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,’red’);
grd.addColorStop(1,’white’);
ctx.fillStyle=grd;
ctx.fillRect(0,0,100,100);
链接起始位置与终点
closePath();