图形变化:移动,缩放,旋转(二)
{{ interaction.likeNum == 0 ? (pageType === 'video' ? '抢首赞' : '点赞') : formatNumber(interaction.likeNum) }}
{{ interaction.collectionNum == 0 ? '收藏' : formatNumber(interaction.collectionNum) }}
{{ interaction.discussNum == 0 ? (pageType === 'video' ? '抢沙发' : '讨论') : formatNumber(interaction.discussNum) }}
分享
适合人群
web前端开发工程师
你将会学到
通过本节课的学习带领让大家能够熟练的学习js中通过canvas绘图的功能
课程简介
欢迎加入我的51CTO官方专属交流群:697483006
有关学习上的任何问题都可以在群中向老师提出来,我会及时给予解答的。
本课程已经更新到了“Web前端全栈开发零基础到全栈开发 -前端技术持续更新”课程中,大家可以持续学习到web前端前沿的技术
canvas画板学习的整体介绍以及基本使用
通过开发七巧板案例以及封装方法来绘制虚线的案例来巩固基础知识
在画板中把导入的图片绘制出来以及对图片进行各种处理
针对画板中的图形可以进行各种变化:移动,旋转和缩放
对画板中的内容下载并且保存到本地
配合计时器来完成图形中绘制的动画以及介绍综合案例的需求梳理
通过鼠标按下移动抬起来控制在画板中模拟铅笔绘制线条的过程
梳理涂鸦板APP案例开发的流程
展开更多
{{tips.text}}
{{ noteHeaderTitle }}
笔记{{ hasMyNote ? '我的笔记' : '记笔记' }}
{{ hasMyNote ? '我的笔记' : '记笔记' }}
优质笔记
更新于:{{ $dayjs.formate('YYYY-MM-DD HH:mm:ss', item.last_uptime*1000) }}
公开笔记对他人可见,有机会被管理员评为“优质笔记”
{{ noteEditor.content.length }}/2000
公开笔记
保存提问
讲师收到你的提问会尽快为你解答。若选择公开提问,可以获得更多学员的帮助。
记录时间点
记录提问时视频播放的时间点,便于后续查看
公开提问
提交课程大纲
自动连播
- 第一章 canvas画板学习的整体介绍以及基本使用
- 1-1试看 canvas专题的课程整体的介绍15:00
- 1-2试看 在项目中创建canvas以及js如何做兼容处理15:00
- 1-3试看 通过canvas绘制执行15:00
- 1-4试看 绘制矩形,三角形图形15:00
- 1-5试看 绘制弧线以及指定线宽度和线条颜色,填充色15:00
- 1-6试看 绘制圆形以及绘制虚线17:00
- 第二章 通过开发七巧板案例以及封装方法来绘制虚线的案例来巩固基础知识
- 2-1试看 绘制七巧板以及封装绘制虚线的方法15:00
- 2-2如何封装方法来绘制任意的一条虚线(二)15:00
- 2-3如何封装方法来绘制任意的一条虚线(三)15:00
- 2-4如何封装方法来绘制任意的一条虚线(四)15:00
![Web前端全栈开发(前端技术持续更新)](https://s2.51cto.com/images/202011/17/3b104cd0c205cc380fed0b45a51de269.png?x-oss-process=image)
Web前端全栈开发(前端技术持续更新)
10485人学习
刘建萍
4.9
¥990.00
![Web前端开发仿美团/饿了吗移动App之 高德地图接口对接案例](https://s2.51cto.com/images/202005/16/215787d5cd49c363da4f4c2b77e2f92c.png?x-oss-process=image)
Web前端开发仿美团/饿了吗移动App之 高德地图接口对接案例
1546人学习
刘建萍
5.0
¥299.00
![Web前端开发 仿京东商城/淘宝商城 之多图轮播切换案例](https://s2.51cto.com/images/202005/17/2f9c6663c122bef4c524fed2517666d5.png?x-oss-process=image)
Web前端开发 仿京东商城/淘宝商城 之多图轮播切换案例
511人学习
刘建萍
5.0
¥19.90
![canvas画板学习的整体介绍以及基本使用](https://s2.51cto.com/images/202005/09/2d3f88c5076b3c76b98701a07edb5af4.png?x-oss-process=image)
canvas画板学习的整体介绍以及基本使用
462人学习
刘建萍
5.0
¥199.00
![微信小程序0基础学习企业实战项目/框架/组件/API/服务端/UI框架](https://s2.51cto.com/images/202005/16/96cd7c3d9aa80b3006173294204b4c46.png?x-oss-process=image)
微信小程序0基础学习企业实战项目/框架/组件/API/服务端/UI框架
330人学习
刘建萍
5.0
¥19.90
![Web前端全栈开发经典案例之涂鸦板App开发案例/canvas](https://s2.51cto.com/images/202011/17/a4f97a103cd6ee6c31e32eefd1c048eb.png?x-oss-process=image)
Web前端全栈开发经典案例之涂鸦板App开发案例/canvas
238人学习
刘建萍
5.0
¥399.00
![Web前端开发 之 JS语言开发游戏项目 大鱼喂小鱼游戏](https://s2.51cto.com/images/202006/04/5b280f878c83ca3a7ec5cd97e916243f.png?x-oss-process=image)
Web前端开发 之 JS语言开发游戏项目 大鱼喂小鱼游戏
211人学习
刘建萍
5.0
¥98.00
![web前端开发之OA系统中企业通讯录的开发和仿淘宝电商的记录用户登录状态](https://s2.51cto.com/images/202005/18/7f0951a1cf076c2ceabee95f80f60090.png?x-oss-process=image)
web前端开发之OA系统中企业通讯录的开发和仿淘宝电商的记录用户登录状态
163人学习
刘建萍
5.0
¥99.00