Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
针对初学者的HTML5 Canvas
Rating: 4.3 out of 5(5 ratings)
192 students

针对初学者的HTML5 Canvas

学习如何在HTML5 Canvas上使用JavaScript创建绘图课程,涵盖了如何使用Canvas和绘制的基础知识
Created byfei ye
Last updated 9/2020
Chinese (Simplified)

What you'll learn

  • 学会使用HTML5 canvas
  • 在网页上的HTML5 Canvas中创建动画
  • 在web内容中动态添加图像创建和操作
  • 在任何网站上使用HTML5 canvas

Course content

2 sections35 lectures9h 42m total length
  • 01-体验canvas绘图17:01
  • 02-解释上下文和绘制路径8:45
  • 03-绘制平行线&线模糊问题14:51
  • 04-绘制三条不同颜色和宽度的平行线11:34
  • 05-绘制填充的三角形12:11
  • 06-绘制镂空的正方形&非零环绕填充规则19:22
  • 07-线两端样式&拐点样式13:59
  • 08-绘制虚线13:12
  • 09-绘制渐变的矩形11:43
  • 10-折线图-绘制网格21:19
  • 11-折线图-绘制坐标系22:31
  • 12-折线图-绘制点10:38
  • 13-折线图-对象的构建18:20
  • 14-折线图-面向对象(网格和坐标系)19:42
  • 15-折线图-面向对象(点&连线)17:48
  • 16-绘制矩形11:55
  • 17-绘制渐变的矩形17:20

Requirements

  • 基本的HTML和JavaScript
  • 渴望学习
  • 会电脑

Description

HTML5中的canvas元素允许您在网页中直接创建基于动态脚本的绘图和动画。

将你的JavaScript可视化地绘制在绘图表面上的自由图形。

Canvas是一个强大的元素,具有许多选项。在本课程中,

我们将向您展示如何使用canvas并开始使用JavaScript绘图学习使用canvas直接绘制web页面的基本概念。

本课程是为想学习如何更好地使用HTML5的初学者准备的。您将学习如何设置canvas以及如何与之交互。

课程涵盖了
绘制矩形和线条
画弧和圆
如何实现曲线
如何添加颜色
破折号、线条和梯度
流行的HTML5方法
如何添加文本
在动态中创建图像
缩放、切片和canvas操作
旋转和自定义的转换等等
源代码包括在内,解决方案的一些挑战也包括在本课程中。
了解如何创建您自己的动态生成的图形和酷动画在线。
您可以使用canvas来构建图形、创建动画、游戏和图像合成。
本课程将为您提供在canvas中创建绘图所需的基础知识。


Who this course is for:

  • 任何想要了解更多关于使用HTML5的人。
  • 学习如何使用HTML5和JavaScript。
  • 学习HTML5 canvas的基础知识
  • 学习如何在网页上应用动画