3天html自学教程,html自学教程（八）html5基础

标签通常需要指定一个id属性(脚本中经常使用),width和height属性定义的画布的大小

了解和使用Canvas需要基本了解JavaScript的基本知识

canvas是一个二维坐标

canvas的左上角坐标为(0,0)

x坐标向右增加

y坐标向着画布底部增加

Canvas-路径

在Canvas上画线,我们将使用以下两种方法:

●moveTo(x,y)定义线条开始坐标

●lineTo(x,y)定义线条结束坐标

在canvas中绘制圆形,我们将使用以下方法:

●arc(x,y,start,stop)

Canvas-文本

使用canvas绘制文本,重要的属性和方法如下:

●font-定义字体

●fillText(text,x,y)-在canvas上绘制实心的文本

●strokeText(text,x,y)-在canvas上绘制空心的文本

Canvas-渐变

渐变可以填充在矩形,圆形,线条,文本等等,各种形状可以自己定义不同的颜色

以下有两种不同的方式来设置canvas渐变:

●creatLinearGradient(x,y,x1,y1)-创建线条渐变

●creatRadialGradient(x,y,r,x1,y1,r1)-创建一个径向/圆渐变

当我们使用渐变对象,必须使用两种或两种以上的停止颜色

addColorStop()方法指定颜色停止,参数使用坐标描述,可以是0至1

使用渐变,设置fillStyle或strokeStyle的值为渐变,然后绘制形状,如矩形,文本,或一条线

Canva-图像

把一幅图像放置在画布上,使用以下方法:

●drawImage(image,x,y)

三 html5 SVG与Canvas的区别

SVG:

SVG是一种使用XML描述2D图形的语言

SVG基于XML,这意味着SVG DOM中的每个元素都是可用的.你可以为某个元素附加JavaScript事件处理器

在SVG中,每个被绘制的图形均被视为对象.如果SVG对象的属性发生改变,那么浏览器能够自动重现图形

特点:

●不依赖分辨率

●支持事件处理器

●最适合带有大型渲染区域的应用程序(比如谷歌地图)

●复杂程度高会减慢渲染速度(任何过度使用DOM的应用都不快)

●不适合游戏应用

Canvas:

canvas通过JavaScript来绘制2D图形

canvas可以逐像素进行渲染的

在canvas中,一旦图形被绘制出来,它就不会继续得到浏览器的关注

如果其位置发生变化,那么整个场景也需要重新启动,包括任何或许已被图像覆盖的对象

特点:

●依赖分辨率

●不支持事件处理器

●弱的文本渲染能力

●能够以.png或.ipg格式保存结果图像

●最适合图像密集型的游戏,其中的许多对象都会被频换重绘

3天html自学教程,html自学教程（八）html5基础相关推荐

html5教程 w3cschool,W3Cschool学习笔记——HTML5基础教程
HTML5 建立的一些规则:新特性应该基于 HTML.CSS.DOM 以及 JavaScript. 减少对外部插件的需求(比如 Flash) 更优秀的错误处理更多取代脚本的标记 HTML5 应该独立 ...
如何自学python到做项目-django教程如何自学
Django教程是讲解Django框架学习方法和步骤的,可以理解为教材,是供初学者或者程序员学习和提升技术的. 下面介绍下Django教程所包含的内容以及学Django所需要的必备技能. 学Djang ...
java教程java自学_15必须阅读Java 8教程
java教程java自学 Java 8于上个月发布,并且充满了新功能和幕后优化. 互联网在覆盖所有这些新增功能(包括好与坏)方面都做得相当不错 . 我认为最好汇总一下我们认为是其中最好的一些教程,以帮 ...
python基础教程-北大学霸自学这套Python教程，7天开发12款游戏，堪称宝藏教程
下载好向圈APP可以快速联系圈友您需要登录才可以下载或查看,没有帐号?立即注册 x 学习Python的人,总会到处寻找资料,比如这里看点视频,那里看点文章,但最后依然学不好Python.因为缺乏 ...
我爱自学网，各种教程
强烈向大家推荐一个好网站,[url=http://www.51zxw.net/study.asp?vip=18873369][我要自学网][/url],教程由在校老师录制,有办公会计.平面设计.室内设 ...
AutoCAD自学在线视频教程图文教程
http://www.mfcad.com/cad/jiaocheng/ AutoCAD自学在线视频教程图文教程
国内外的自学web前端开发教程网站
@TOC有哪些自学web前端开发教程网站? 国内外有哪些自学web前端开发教程网站? https://www.w3cl.com 第一个着力推荐 http://codyhouse.co/library ...
电脑黑客技术新手入门，自学黑客技术入门教程
最近经常有小伙伴联系我说要学黑客技术,当然目的各种各样,有的就是觉得黑客很酷,单纯想要学技术,还有的就是想找人帮忙攻击赌博网站或者监听别人的电话(以女朋友的电话居多),对于想要单纯学技术的朋友我很欢迎 ...
Ruby完全自学手册（图文教程）
Ruby 简介 Ruby,一种为简单快捷面向对象编程(面向对象程序设计)而创的脚本语言,由日本人松本行弘(まつもとゆきひろ,英译:Yukihiro Matsumoto,外号matz)开发,遵守GPL协 ...
FDTD Solutions自学整理笔记入门教程（3）：监视器Monitors
FDTD自学整理笔记入门教程之监视器(转载+改动) 3.监视器Monitors:(这个编辑器真的不方便,文字+图片的操作真是太麻烦了,为了方便就简单截图上传)

3天html自学教程,html自学教程（八）html5基础

3天html自学教程,html自学教程（八）html5基础相关推荐

最新文章

热门文章