Canvas清空当前画布方法

最新推荐文章于 2024-11-25 04:37:39 发布

原创最新推荐文章于 2024-11-25 04:37:39 发布 · 1.4w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #html5

html 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了HTML5 Canvas的基本用法，包括如何创建画布、获取绘图上下文及绘制基本图形如路径、矩形、圆形等。此外还介绍了如何使用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();