一篇canvas带你画出整个特效世界

这篇具有很好参考价值的文章主要介绍了一篇canvas带你画出整个特效世界。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

canvas特效教程,小嘎鱼前端特效,前端,javascript,html5

目录

一,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 的正方形

canvas特效教程,小嘎鱼前端特效,前端,javascript,html5

<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的参数一样

canvas特效教程,小嘎鱼前端特效,前端,javascript,html5

<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>

绘制效果 

 

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>

清除效果

canvas特效教程,小嘎鱼前端特效,前端,javascript,html5

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>

canvas特效教程,小嘎鱼前端特效,前端,javascript,html5 

开始绘制笑脸,这里使用的是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>

canvas特效教程,小嘎鱼前端特效,前端,javascript,html5 

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>

canvas特效教程,小嘎鱼前端特效,前端,javascript,html5 

 

②三次贝塞尔曲线

使用三次贝塞尔曲线画一个小爱心

<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>

canvas特效教程,小嘎鱼前端特效,前端,javascript,html5

我是Aic山鱼,感谢您的支持
​原 创 不 易 ✨还希望支持一下
点赞👍:您的赞赏是我前进的动力!
收藏⭐:您的支持我是创作的源泉!
评论✍:您的建议是我改进的良药!
山鱼🦈社区:山鱼社区💌💌

 

 

到了这里,关于一篇canvas带你画出整个特效世界的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 这些女强人,颠覆了整个世界

    给你十秒钟你能说出多少个世界上最伟大的程序员? 你可能会说出下面这些答案: Java 之父 :詹姆斯 · 高斯林 James Gosling Python 之父:吉多 · 范德罗姆 Guido van Rossum Linux 之父:林纳斯 · 托瓦兹 Linus Torvalds C 语言之父:丹尼斯 · 里奇 Dennis Ritche Unix 创始人:肯 · 汤普逊 Ken

    2024年02月05日
    浏览(18)
  • Android 60问60答 (一篇复习整个Android)

    厂商开发平台: los 黑莓(blackBerry) 第三方私有平台:第三方开发供移动设备厂商使用 WindowsMobile 免费开源平台: Android Symbian 充当用户和设备之间的接口。 管理所用活动内存和资源共享 充当设备上所安装的应用的主机 常由硬件制造商使用,因为它提供一个硬件抽象层,可

    2024年02月11日
    浏览(33)
  • 万字长文带你快速了解整个Flutter开发流程

    可以用以下提纲在短时间内了解 Flutter 的开发流程时,经过本次培训,你可以大致了解Flutter的开发流程 Flutter 是什么?为什么选择 Flutter? 跨平台开发的优势:一套代码多平台运行。 Flutter 是由 Google 开发的开源用户界面框架,用于创建跨平台移动应用、Web 应用和桌面应用。

    2024年02月11日
    浏览(54)
  • 情人节定制:HTML5 Canvas全屏七夕爱心表白特效

    “这个世界乱糟糟的而你干干净净可以悬在我心上做太阳和月亮。”,七夕节表白日,你要错过吗?如果你言辞不善,羞于开口的话,可以使用 html5 canvas 制作浪漫的七夕爱心表白动画特效,全屏的爱心和表白语,了解一下!  🌹 最后,祝天下有情人终成眷属 🌹

    2024年02月11日
    浏览(46)
  • 一篇带你精通MPLS

    MPLS:多协议标签交换 可以基于多种不同的3层协议来生成2.5层的标签信息 包为网络层的PDU,故包交换就是基于IP地址进行数据转发;也就是路由器的路由行为。(路由器和终端基于3层的IP地址数据转发的路由行为) 原始包交换 查两张表 在包交换过程中,数据包每经过一个路

    2024年02月22日
    浏览(48)
  • 数组(一篇带你掌握数组)

        在之前,我们想要存储一个数据的时候可以创建变量,例如存储一个整形的变量,我们使用int类型的变量来存储,那么如果存储一组相同类型的数据呢?这时我们就引入了 数组 的概念。 目录 一、一维数组的创建和初始化 1.1数组的创建 1.2 数组的初始化 1.3 一维数组的使

    2023年04月08日
    浏览(49)
  • vLive带你走进虚拟直播世界

    虚拟直播是什么? 虚拟直播是基于5G+实时渲染技术,在绿幕环境下拍摄画面,通过实时抠像、渲染与合成,再推流到直播平台的一种直播技术。尽管这种技术早已被影视工业所采用,但在全民化进程中却是困难重重,面临着克服相关技术难题。该技术的应用需要具备专业导演

    2023年04月20日
    浏览(44)
  • Javaの一篇带你吃透接口

    随着接口的到来,JavaSE的学习笔记大结局也即将来临,最近的几篇博客写到了封装,继承,多态,抽象类等等,都循序渐进得介绍了这类的知识,大家如果接口这一块理解的很困难的话,建议去完善一下前面的知识哦 👉Java封装 👉静态成员 👉代码块 👉内部类 👉继承 👉多

    2023年04月08日
    浏览(64)
  • 使用html2canvas将整个元素导出为图片,其中包含svg和img,解决img跟svg导出时img或svg(canvg处理)不显示的问题,以及相关优化

    目录 前言 一、准备 二、解决问题 1.将svg跟img转为canvas的方法 2.将base64转换成file文件的方法 3.点击下载使用方法 1).对dom没有处理,需求只是将图片导出即可  2).涉及对dom的拖拽,流程图之类的(需复制dom,在复制的dom上进行处理)  三、效果图如下 查阅很多相关的文章和

    2024年01月20日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包