dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 12205|回复: 56

[@] Canvas绘图详解

  [复制链接]

该用户从未签到

2970

主题

93

帖子

408

积分

会|员

Rank: 9Rank: 9Rank: 9

积分
408
发表于 2018-12-26 20:26:53 | 显示全部楼层 |阅读模式
程序人生
课程方向: 网页前端 
课程类型: 功能实现 

本站资源全部免费,回复即可查看下载地址!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
5731805200012a9c06000338-240-135.jpg

课程简介:
本课程为Canvas系列课程第二课。通过对《绚丽的倒计时效果的学习》,在大家对Canvas绘图有一定了解的基础上,本课程对Canvas的各个图形接口进行了系统详细地介绍,并辅以示例,让同学彻底掌握Canvas绘图,随心所欲在浏览器上绘制炫丽效果!

课程须知:
需有基础HTML,JS,CSS知识。需学习《绚丽的倒计时效果》Canvas绘图第一课。

课程能学到什么?
深入了解Canvas各个绘图接口的使用方法。基础图形学知识。通过对一些基本元素的绘制,启发大家更多有效地绘图方法。

课程目录:
第1章 让我们继续Canvas绘图之旅
通过《绚丽的倒计时效果》,相信大家已经对Canvas绘图有了基础的理解。现在,让我们继续Canvas之旅吧!
1-1 继续Canvas绘图之旅 (02:17)

第2章 从线条开始
线条元素虽然简单,但不可小觑。它是构成图形的基础元素。本章详细介绍了Canvas绘图中使用线条构成基本图形元素的方法。
2-1 回顾——从线条开始 (05:40)
2-2 画一条直线
2-3 线条组成的图形和beginPath (09:34)
2-4 多边形的填充和closePath (07:56)
2-5 矩形、覆盖和透明色 (06:36)
2-6 小结:从线条开始 (02:18)

第3章 线条的属性
引入一个更加复杂的图形绘制案例——画一个五角星。并且通过这个案例,详细说明Canvas线条属性的使用。
3-1 线条的帽子:lineCap (04:59)
3-2 画一个五角星 (13:04)
3-3 线条的连接:lineJoin和miterLimit (05:03)
3-4 小结:线条的属性 (01:32)

第4章 星空和图形变换
拓展五角星的绘制,绘制多个五角星组成一片星空,并且据此介绍Canvas中图形变换相关功能的使用。
4-1 画一片星空 (06:11)
4-2 图像变换和状态保存 (08:59)
4-3 应用translate、rotate和scale (06:55)
4-4 深入理解图形变换 (08:30)
4-5 小结:星空和图形变换 (01:08)

第5章 填充样式
本章详细介绍了fillStyle可以使用的所有样式。除了使用一种颜色以外,还包括使用线性渐变或者径向渐变进行渐变色的填充;使用图片、画布或者video视频进行样式填充。
5-1 线性渐变 (10:30)
5-2 径向渐变 (04:18)
5-3 使用图片、画布或者video (07:00)
5-4 渐变色和纹理小结 (02:01)

第6章 曲线的绘制
本章详细分析了Canvas绘图提供的四个曲线绘制函数,使得大家可以在自己的Canvas画布上任意绘制弧线或者曲线,大大拓展了绘制的灵活性。
6-1 arc(),圆弧和圆角矩形 (12:26)
6-2 arcTo(),另一种弧线绘制方法 (07:21)
6-3 绘制一角弯月 (10:00)
6-4 quadraticCurveTo(),二次贝塞尔曲线 (04:45)
6-5 bezierCurveTo(),三次贝塞尔曲线 (05:55)
6-6 小结:曲线的绘制 (01:34)

第7章 文字的渲染
本章详细介绍了在canvas上进行文字渲染的方式。学习本章后,大家可以图文并茂地使用Canvas,创建属于自己的Canvas应用。
7-1 文字渲染基础 (05:42)
7-2 font:字型、字号和字体 (08:55)
7-3 文本对齐 (06:35)
7-4 文本的度量 (02:39)
7-5 小结:文字的渲染 (01:52)

第8章 Canvas高级内容
给自己的绘图添加阴影;制定全局透明色;制作绚丽的探照灯效果或者剪纸效果;为Canvas绘图添加交互能力……本章探讨了5个不同侧面的高级话题,让你意识到,Canvas绘图——只有想不到,没有做不到!
8-1 阴影 (06:18)
8-2 globalAlpha和globalCompositeOperation (14:44)
8-3 clip和剪辑区域 (08:27)
8-4 路径方向和剪纸效果 (08:55)
8-5 使用Canvas交互和isPointInPath (08:05)
8-6 总结:Canvas高级内容 (02:22)

第9章 Canvas之旅仍在继续
Canvas是如此的具有魅力,将web从传统的文档显示带入了一个全新的境地。Canvas标准一直在更新,同时,我们的Canvas之旅远没结束。让我们一起看看,使用Canvas,我们还有可能做出什么。
9-1 在Canvas中使用其他HTML元素 (07:25)
9-2 Canvas标准一直在更新 (07:50)
9-3 扩展Canvas的context (09:49)
9-4 Canvas与浏览器兼容性 (06:03)
9-5 Canvas图形库 (04:26)
9-6 如何使用Canvas处理图像 (02:23)
游客,如果您要查看本帖隐藏内容请回复





温馨提示:
1、本站所有内容均为互联网收集或网友分享或网络购买,本站不破解、不翻录任何视频!
2、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意!
3、本站资源仅供本站会员学习参考,不得传播及用于其他用途,学习完后请在24小时内自行删除.
4、本站资源质量虽均经精心审查,但也难保万无一失,若发现资源有问题影响学习请一定及时点此进行问题反馈,我们会第一时间改正!
5、若发现链接失效了请联系管理员,管理员会在2小时内修复
6、如果有任何疑问,请加客服QQ:1300822626 2小时内回复你!
回复

使用道具 举报

  • TA的每日心情
    奋斗
    2024-11-26 15:56
  • 签到天数: 245 天

    [LV.8]以坛为家I

    0

    主题

    3995

    帖子

    8832

    积分

    超凡入圣

    Rank: 10Rank: 10Rank: 10

    积分
    8832

    发表于 2019-4-20 12:45:15 | 显示全部楼层
    Canvas系列课程  还是比较不错的 谢谢楼主
    回复 支持 反对

    使用道具 举报

  • TA的每日心情

    2024-8-17 15:21
  • 签到天数: 120 天

    [LV.7]常住居民III

    1

    主题

    395

    帖子

    1253

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    1253

    发表于 2019-4-25 10:11:09 | 显示全部楼层
    想要快捷回复
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    6 天前
  • 签到天数: 23 天

    [LV.4]偶尔看看III

    0

    主题

    90

    帖子

    370

    积分

    豁然贯通

    Rank: 4

    积分
    370

    发表于 2019-5-30 13:40:18 | 显示全部楼层
    感谢楼主!!!!!!!!
    回复

    使用道具 举报

  • TA的每日心情

    2024-8-9 08:27
  • 签到天数: 33 天

    [LV.5]常住居民I

    1

    主题

    204

    帖子

    696

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    696

    发表于 2019-6-12 18:11:54 | 显示全部楼层
    谢谢楼主分享
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2024-10-29 09:31
  • 签到天数: 207 天

    [LV.7]常住居民III

    1

    主题

    450

    帖子

    1459

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    1459

    发表于 2019-9-9 17:21:23 | 显示全部楼层
    感谢楼主分享!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情

    2022-5-4 23:30
  • 签到天数: 40 天

    [LV.5]常住居民I

    0

    主题

    164

    帖子

    475

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    475

    发表于 2019-12-15 13:30:10 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情

    2024-5-25 20:48
  • 签到天数: 31 天

    [LV.5]常住居民I

    0

    主题

    133

    帖子

    360

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    360

    发表于 2019-12-17 09:38:14 | 显示全部楼层
    额,看不懂在说神马~@_@
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2024-12-9 14:33
  • 签到天数: 103 天

    [LV.6]常住居民II

    0

    主题

    296

    帖子

    859

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    859

    发表于 2019-12-17 09:44:37 | 显示全部楼层
    正需要,支持楼主大人了!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    郁闷
    昨天 09:51
  • 签到天数: 1194 天

    [LV.10]以坛为家III

    2

    主题

    1536

    帖子

    6180

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    6180

    发表于 2019-12-31 20:30:51 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2024-12-24 10:20 , Processed in 0.255239 second(s), 45 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表