注册 登录
主题 : 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
用户被禁言,该主题自动屏蔽!
级别: 侠客
UID: 670874
精华: 0
发帖: 82
可可豆: 82 CB
威望: 82 点
在线时间: 22(时)
注册时间: 2018-12-02
最后登录: 2019-03-08
3 楼:  发表于: 2018-12-27 11:58    发自: Web Page
去过,不过离实战还是远了点
 CocoaChina » H5

CocoaChina社区转载内容已尽可能注明出处,如未能核实来源或转发内容图片有权利瑕疵的,请及时联系社区进行修改或删除【联系方式QQ : 3442093904 邮箱:support@cocoachina.com】文章内容为作者独立观点,不代表CocoaChina社区立场。版权归原作者所有,如申请授权请联系作者,因文章侵权CocoaChina社区不承担任何法律及连带责任。

描述
快速回复

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

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

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