位置: IT常识 - 正文

一篇canvas带你画出整个特效世界(canvas画线条)

编辑:rootadmin
一篇canvas带你画出整个特效世界

推荐整理分享一篇canvas带你画出整个特效世界(canvas画线条),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:canvas画一条线,canvas画线条,canvas怎么画图,绘制canvas,canvas怎么画图,canvas怎么画图,canvas怎么画,canvas怎么画,内容如对您有帮助,希望把文章链接给更多的朋友!

目录

一,canvas是啥?

1.初识canvas

2.路径绘制

3.拆分画法

4.清除画布 

5.绘制圆形笑脸

6.贝塞尔曲线

①二次贝塞尔曲线

②三次贝塞尔曲线

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

一篇canvas带你画出整个特效世界(canvas画线条)

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

本文链接地址:https://www.jiuchutong.com/zhishi/297888.html 转载请保留说明!

上一篇:【Leetcode】设计循环队列("设计")

下一篇:Google Chrome装到D盘的方法(chrome os安装到u盘)

  • 海关完税价格是什么
  • 只有增值税专用发票才能抵扣进项吗
  • 三证合一后纳税人识别号和信用代码一样吗
  • 提供劳务代扣的发票
  • 计提印花税如何计算
  • 取得交易性金融资产投资收益为什么在借方
  • 个体户缴纳经营所得个税怎么算的
  • 个人所得税10月突然增加了
  • 预提费用的附件怎么做
  • 公司注销章要销毁吗
  • 信用减值损失借贷方表示什么意思
  • 管理费用期末有余额么
  • 其他应收款报表数据怎么取
  • 重型开输机属于固定资产什么类别
  • 软件开发的服务内容方式要求
  • 会计账簿的定义及其作用
  • 什么样的企业用交税
  • 酒店会务费发票税率
  • 进项票小于销项票怎么办
  • 支付境外销售佣金如何入账科目
  • 代扣代缴手续费要交增值税吗
  • 找私人买东西不发货算诈骗吗
  • 股票质押得到的钱怎么算
  • bios设置密码有什么用
  • 绿化租赁价格
  • 现金日记账和银行存款日记账登记
  • 电脑如何关闭屏幕还在工作
  • 出版社购买版权是什么
  • php bcsub
  • 差旅费涉及的科目
  • 营业利润投资收益是借方还是贷方
  • php如何自定义函数
  • 酒店加盟管理费多少
  • 应付账款盘盈会计分录
  • layui iconfont
  • php去除指定字符
  • 期末应交增值税转入未交增值税
  • 销售废旧设备增值税率
  • 大雾山国家公园在哪里
  • php抓取
  • explorer.exe无响应桌面卡死是什么原因
  • 税票电子发票怎么开
  • 购进商品的运费怎么记账
  • 增值税起征点适用于哪些
  • 小企业会计准则调整以前年度费用分录
  • 一般纳税人作废小规模时开的发票怎么报税
  • sql server 2008怎么用
  • 兼职会计人员的职责
  • 避税唯一安全的方法
  • 内账中已交的增值税在哪
  • 工资计提少了怎么办
  • 无形资产内部研究开发支出的处理
  • 累计折旧的计提会计分录
  • sql server怎么改数据
  • win8怎么添加我的电脑到桌面
  • 整理房间日记200
  • 活动目录管理工具
  • win7任务管理器快捷键ctrl+alt+
  • 手把手教你安装使用国家反诈中心
  • Linux系统下以模块方式安装卸载文件系统
  • win8系统怎么打开我的电脑
  • linux软件少
  • Android Broadcast
  • unity3d怎么做游戏
  • jquery 选择
  • 如何给图像应用css滤镜处理效果
  • Node.js中的construct
  • jQuery插件ajaxFileUpload异步上传文件
  • shell脚本中实现rm -fr !(file1)
  • 安卓小项目实战软件
  • 基于jQuery和Bootstrap的设计报告的参考文献
  • 代码实现死锁
  • 工程项目管理费计入什么科目
  • 民办非企业单位登记管理暂行条例
  • 土地增值税清算时间要求
  • 查账征收个人经营所得税怎么申报
  • 芜湖买房退契税在哪里退
  • 金税盘的操作步骤
  • 广西国家税务局于红林
  • 昆明学院领导班子
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设