注册 登录
主题 : HTML5绘图基础教程
级别: 新手上路
UID: 650047
精华: 0
发帖: 6
可可豆: 42 CB
威望: 33 点
在线时间: 2(时)
注册时间: 2018-06-05
最后登录: 2018-06-09
0 楼:  发表于: 2018-06-09 17:49    发自: Web Page

HTML5绘图基础教程   


HTML5绘图属于HTML5里面的一部分,这个课程只给大家讲HTML5绘图的api。那这一小节呢!我们看HTML5绘图的基础。

HTML5绘图基础

1.在HTML5以前的时代,前端开发者无法在HTML页面上动态地绘制图片。
如果想要在前端动态的画出图片,我们就需要后端的服务器来生成图片,不断的修改前端的DOM,这样才能做到动态。

2. HTML5的出现改变了这个局面,HTM5新增了一个<canvas../>元素,相当于一个画布,可以获得一个CanvasRenderingContext2D对象,这个就是HTML5,也就是JavaScript提供的一个对象。

3. CanvasRenderingContext2D提供了很多画图API,比如说有画矩形的,画线的。

HTML5画图主要就是用这个对象,它提供的API来画图。所以学习HTML5画图主要学习这个对象里边的方法和属性的用法。

如何在HTML5上进行画图?

1.step1:得到 <canvas../>DOM对象
canvas就是一个HTML5的标签,它有width、height这样的属性,把它当成一个空白的画布。

2. step2:调用Canvas对象的getContext()方法得到CanvasRederingContext2D对象

3. step3:调用CanvasRederingContext2D完成画图

我给大家一个API,让大家去参考

1.我们开发这个HTML5开发的时候,经常会用到一个w3school的文档。

这个网址是http://www.w3school.com.cn/

2. 我们可以看一下这个HTML5的参考文档,这其中有HTML5的画图(画布)。

里面就给大家讲了什么是canvas?canvas元素,以及如何来画图?这里都有相应的内容。大家可以看看
[ 此帖被青鸟it在2018-06-09 17:58重新编辑 ]

级别: 禁止发言
状态: 连续签到 - [1天]
UID: 655651
精华: 0
发帖: 46
可可豆: 50 CB
威望: 50 点
在线时间: 0(时)
注册时间: 2018-06-10
最后登录: 2018-06-11
1 楼:  发表于: 2018-06-10 08:46    发自: Web Page
用户被禁言,该主题自动屏蔽!
级别: 禁止发言
UID: 659059
精华: 0
发帖: 4
可可豆: 31 CB
威望: 31 点
在线时间: 0(时)
注册时间: 2018-08-01
最后登录: 2018-08-03
2 楼:  发表于: 2018-08-01 23:47    发自: Web Page
用户被禁言,该主题自动屏蔽!
 CocoaChina » H5

本站内容均为本站转发,已尽可能注明出处。因未能核实来源或转发内容图片有权利瑕疵的,请及时联系本站,本站会第一时间进行修改或删除。 QQ : 3442093904

描述
快速回复

关注本帖(如果有新回复会站内信通知您)

发帖、回帖都会得到可观的积分奖励。查看论坛积分规则

按"Ctrl+Enter"直接提交
    顶部