Canvas清空当前画布方法

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();

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值