目录
一,canvas是啥?
1.初识canvas
2.路径绘制
3.拆分画法
4.清除画布
5.绘制圆形笑脸
6.贝塞尔曲线
①二次贝塞尔曲线
②三次贝塞尔曲线
文章来源地址https://www.toymoban.com/news/detail-781756.html
一,canvas是啥?
Canvas是HTML5中新出的一个元素,我们可以在上面绘制一系列图形。Canvas 在HTML文件中的写法很简单: <canvasid="canvas" width="宽度" height="高度"></canvas>,三个重要的属性,id,高度,宽度(这里就是指的你要在多宽多高的画布上来进行操作),canvas翻译过来就是画布的意思,所以我们也可以称他为画布
1.初识canvas
既然有画布了,那就得有画笔,所以我们的操作步骤为,创建画布,拿到该画布的元素,然后再拿起画笔,这里我们先画一个小矩形来看一下小效果,使用的是fillRect,参数分别为(x,y,w,h)这第一对参数啊就是坐标点,在哪一个坐标点开始画,第二对参数就是你画的东西多大,如果参数分别为(0,0,100,100)就是从远点开始,画一个宽高为100 的正方形
<body>
<canvas id="c1" width="600" height="400"></canvas>
<script>
// 1.找到画布
var c1 = document.querySelector('#c1');
// 2.获取画笔
var ctx = c1.getContext('2d');
// 3.绘制图形 画一个矩形fillRect(位置x,位置y,宽度,高度)
ctx.fillRect(400,100,100,100)
</script>
</body>
2.路径绘制
路径顾名思义就是只把该图形的路径画出来,也就是不进行内部填充,只进行边框的绘制,这里使用的是strokeRect 他的参数和fillRect的参数一样
<body>
<canvas id="c1" width="600" height="400">该浏览器不支持canvas</canvas>
<script>
var c1 = document.querySelector('#c1');
var ctx = c1.getContext('2d');
// 路径绘制矩形
ctx.strokeRect(100,100,100,100)
</script>
</body>
3.拆分画法
步骤为: beginPath开始绘制,rect绘制图形,绘制方式(fill、stroke)closePath绘制结束
<body>
<canvas id="c1" width="600" height="400">该浏览器不支持canvas</canvas>
<script>
var c1 = document.querySelector('#c1');
var ctx = c1.getContext('2d');
// 拆分路径绘制矩形
// 这里要使用beginPath,closePath
ctx.beginPath();// 开始绘画
ctx.rect(100, 100, 200, 100);
ctx.stroke();
ctx.closePath();// 绘画结束
// 拆分填充绘制矩形
ctx.beginPath();
ctx.rect(200, 150, 200, 100);
ctx.fill();
ctx.closePath();
</script>
</body>
绘制效果
文章来源:https://www.toymoban.com/news/detail-781756.html
4.清除画布
甲:画完了之后,我感觉效果并不是很好,我不想要的我想重新绘制,该咋办呢?
乙:这还不简单啊,直接选中del不就好啦
山鱼:简单粗暴(๑•̀ㅂ•́)و✧,但是呢这里有个比较文雅的方式使用clearRect,清除画布
不仅可以清除画布,配合定时器还能实现动态效果呢,ok先来看一下clearRect里面的参数,仨,分别是(x,y,清除谁,清除多少),这里是从整个画布的远点开始清除,清除c1这个画布的高度,每次清除高度++,开启一个定时器就能获得动态清除的效果啦
<body>
<canvas id="c1" width="600" height="400">该浏览器不支持canvas</canvas>
<script>
var c1 = document.querySelector('#c1');
var ctx = c1.getContext('2d');
// 路径绘制矩形
ctx.strokeRect(100, 100, 200, 100);
ctx.fillRect(200, 150, 200, 100);
// 逐渐的清除绘制的内容
let height = 0;
let t1= setInterval(() => {
height++;
ctx.clearRect(0, 0, c1.clientHeight,height);
if(height >c1.clientHeight){
clearInterval(t1);
}
},10)
</script>
</body>
清除效果
5.绘制圆形笑脸
方块可以绘制那么圆形也肯定能绘制,接下来就进行圆形笑脸的绘制 ,先来绘制一个圆弧,使用的是arc这个参数为六个(x,y,半径,起始角度,结束角度,顺/逆时针【默认的是顺时针】)经过绘制就能得到一个⚪,一个圆为360度也就是2π所以结束的度数为Math.PI*2
<canvas id="c1" width="600" height="400"></canvas>
<script>
var c1 = document.querySelector('#c1');
var ctx = c1.getContext('2d');
// 使用arc()绘制圆形他有6个参数分别为
// 圆心x,圆心y,半径,起始角度,结束角度,顺/逆时针(默认为顺时针)
// false是顺时针true是逆时针
ctx.arc(300, 200, 50, 0, Math.PI*2,false);
ctx.stroke();
</script>
开始绘制笑脸,这里使用的是moveTo和arc来共同完成的,moveTo() 方法把路径移动到画布中的指定点,不创建线条。绘制步骤为:创建画布,获取画布,获取画笔,开始绘制,绘制脸部
<body>
<canvas id="c1" width="600" height="400"></canvas>
<script>
var c1 = document.querySelector('#c1');
var ctx = c1.getContext('2d');
// 使用arc()绘制圆形他有6个参数分别为
// 圆心x,圆心y,半径,起始角度,结束角度,顺/逆时针(默认为顺时针)
// false是顺时针true是逆时针
// 1.绘制脸部
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2);
ctx.moveTo(110,75);
// 2.绘制嘴巴
ctx.arc(75,75,35,0,Math.PI);
ctx.moveTo(65,65);
// 3.绘制眼睛
// 左眼
ctx.arc(60,65,5,0,Math.PI*2)
ctx.moveTo(95,65);
// 右眼
ctx.arc(90,65,5,0,Math.PI*2);
ctx.stroke();
ctx.closePath();
</script>
</body>
6.贝塞尔曲线
①二次贝塞尔曲线
使用二次贝塞尔曲线画一个气泡框
二次曲线:quadraticCurveTo (cp1x, cp1y, x, y) 贝塞尔曲线:bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y) 画圆弧:arcTo (x1,y1,x2,y2,radius);
<body>
<canvas id="c1" width="600" height="400"></canvas>
<script>
var c1 = document.querySelector('#c1');
var ctx = c1.getContext('2d');
ctx.beginPath();
ctx.moveTo(200,300);
ctx.quadraticCurveTo(150,300,150,200);
ctx.quadraticCurveTo(150,100,300,100);
ctx.quadraticCurveTo(450,100,450,200);
ctx.quadraticCurveTo(450,300,250,300);
ctx.quadraticCurveTo(250,350,150,350);
ctx.quadraticCurveTo(200,350,200,300);
ctx.stroke();
ctx.closePath();
</script>
</body>
②三次贝塞尔曲线
使用三次贝塞尔曲线画一个小爱心
<body>
<canvas id="c1" width="600" height="400"></canvas>
<script>
var c1 = document.querySelector('#c1');
var ctx = c1.getContext('2d');
ctx.beginPath();
// 起初点
ctx.moveTo(300,200);
// 两个控制点
ctx.bezierCurveTo(350,150,400,200,300,300);
ctx.bezierCurveTo(200,200,250,150,300,200);
ctx.stroke();
ctx.closePath();
</script>
</body>
我是Aic山鱼,感谢您的支持
原 创 不 易 ✨还希望支持一下
点赞👍:您的赞赏是我前进的动力!
收藏⭐:您的支持我是创作的源泉!
评论✍:您的建议是我改进的良药!
山鱼🦈社区:山鱼社区💌💌
到了这里,关于一篇canvas带你画出整个特效世界的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!