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

Aic山鱼 2024-01-06 原文

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

绘制效果

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 xff0c xff xff0 前端 javascript html5

有关一篇canvas带你画出整个特效世界的更多相关文章

世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
ruby-on-rails - 在 Rails 中需要整个目录树的好方法是什么？ - 2
我正在使用Rails3.2.2并希望递归加载某个目录中的所有代码。例如:[Railsroot]/lib/my_lib/my_lib.rb[Railsroot]/lib/my_lib/subdir/support_file_00.rb[Railsroot]/lib/my_lib/subdir/support_file_01.rb...基于谷歌搜索，我试过:config.autoload_paths+=["#{Rails.root.to_s}/lib/my_lib/**"]config.autoload_paths+=["#{Rails.root.to_s}/lib/my_lib/**/"
ruby - 为什么退出 Ruby 线程会杀死我的整个程序？ - 2
我有这段代码:puts"Start"loopdoThread.startdoputs"Hellofromthread"exitendtext=getsputs"#{text}"endputs"Done"我希望看到“Start”后跟“Hellofromthread”，然后我可以输入会得到回显的输入。相反，我得到“Start”和“Hellofromthread”，然后程序退出。来自关于exit的文档:Terminatesthrandschedulesanotherthreadtoberun.Ifthisthreadisalreadymarkedtobekilled,exitreturnst
ruby-on-rails - Facebook Canvas 应用程序不保存 session - 2
我制作了一个测试facebook应用程序只是为了玩玩，我正在使用session来存储身份验证。我正在使用omniauth。当我从http://fbbtest.heroku.com/登录时然后刷新页面，session仍然保存，它说我已经登录。当我从Canvas上尝试时http://apps.facebook.com/herokutestapp/它让我登录，重定向回来并说我已登录但是当我手动刷新它然后说我没有登录。我必须对rails3中的session做一些特别的事情以便它也可以在FacebookCanvas？这是我目前在我的Controller和View中拥有的内容defindexend
ruby - 有没有办法在不将整个文件加载到数组中的情况下搜索文件？ - 2
这个有效:f=File.new("myfile").readlinesf[0]#=>"line1"f[21]#=>"line22"但是如果我有一个非常大的文件，并且只需要读取几行怎么办？是否可以在不将文件加载到数组的情况下查找特定行并在Ruby中读取它们？我理解IO流，其中(就像在stdin的情况下)您不能随机搜索流。当然，必须有一种方法可以在不加载整个文件的情况下执行此操作。最佳答案不要忽略IO类。IO::foreach是返回枚举器的方法之一，可以延迟计算。IO#each_line也是将返回枚举器的另一个。在Ruby2.0中，
Unity3D : 本地坐标系，世界坐标系，和TransformPoint，TransformVector，TransformDirection的区别 - 2
目录一、世界坐标系与本地坐标系二、srcGameObject.transform.TransformPoint(Vector3 vec)三、srcGameObject.transform.TransformVector(Vector3 vec)四、srcGameObject.transform.TransformDirection(Vector3 vec)五:示例一、世界坐标系与本地坐标系世界坐标很好理解，就是模型的transform.position，通常在无父物体的情况下，创建出来的模型默认位置就是世界坐标系的原点。每个物体都有自身的坐标系，此坐标系就是本地坐标系。本地坐标
jquery - 世界上最愚蠢的人(我)的 Rails 教程？ - 2
我很难找到符合我要求的Rails教程(或书籍也很棒):愚蠢Ruby1.9或最新的1.8MySQL一个游戏(简单的掷骰子游戏)JQuery前端谢谢! 最佳答案 RailsforDummies如果愚蠢是一个主要问题，这可能是您最好的选择。关于jquery-世界上最愚蠢的人(我)的Rails教程？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/3841475/
ruby - 如何使用带有 sdk 的 S3 将整个 "folder"复制到另一个路径？ - 2
当我对单个文件执行此操作时:aws_s3=AWS::S3.new(S3_CONFIG)bucket=aws_s3.buckets[S3_CONFIG["bucket"]]object=bucket.objects["user/1/photos/image_1.jpg"]new_object=bucket.objects["users/1/photos/image_1.jpg"]object.copy_tonew_object,{:acl=>:public_read}但我想移动整个“/photos”文件夹时抛出NoSuchKey。可能s3key只是每个文件的完整路径。如何做到这一点？aw
前端基于DOM或者Canvas实现页面水印 - 2
🐱个人主页：不叫猫先生🙋‍♂️作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！💫系列专栏：vue3从入门到精通、TypeScript从入门到实践📢资料领取：前端进阶资料以及文中源码可以找我免费领取🔥前端学习交流：博主建立了一个前端交流群，汇集了各路大神，一起交流学习，期待你的加入！(文末有我wx或者私信)目录前言一、vue自定义指令directive讲解二、基于DOM的实现方式1.思路整理2.新建index.vue3.新建`directives`文件4.在`directives`文件下创建`index.ts`文件5.在`main.ts`中全局引
ruby-on-rails - 如何记录某个 url 的整个请求( header 、正文等)？ - 2
我需要将所有请求(包括HTTPheader、正文等)记录到某个url。我试过这段代码:defindexglobal_request_loggingendprivatedefglobal_request_logginghttp_request_header_keys=request.headers.keys.select{|header_name|header_name.match("^HTTP.*")}http_request_headers=request.headers.select{|header_name,header_value|http_request_header_key