课程咨询:400-111-8989

  • HTML5工具讲解- Canvas基础篇

    发布:HTML5培训  来源:html5教程  时间: 2018年07月25日

  • 今天小编为大家带来的文章是关于HTML5工具讲解的,今天主要介绍的工具是Canvas的基础篇,对HTML5技术感兴趣,想要学习HTML5技术的小伙伴们快来和小编一起看一看吧。...

  • 今天小编为大家带来的文章是关于HTML5工具讲解的,今天主要介绍的工具是Canvas的基础篇,对HTML5技术感兴趣,想要学习HTML5技术的小伙伴们快来和小编一起看一看吧。

    HTML5工具讲解- Canvas基础篇

    HTML5的目标之一:让网页中的富应用实现起来更简单。

    富应用指漂亮的图片、人机互动功能,以及炫目的动画效果。

    Canvas是实现富应用最重要的HTML5工具之一。与其他HTML元素相比, Canvas需要JavaScript来操作。不适用JavaScript就无法绘制图形,这也就意味着Canvas是一个编程工具。

    使用Canvas可以做到:

    § 简化版的windows画图工具

    § 开发游戏、地图、动态图表

    § 开发音乐灯光秀、物理模拟器

    § ......

    Canvas基础

    一 HTML属性和CSS属性设置

    <canvas>元素就是一块画布,只需给它指定三个属性: id width height

    注意:一定要通过HTML属性 width和 height设置画布的宽和高,而不要在样式表中设置画布元素的宽和高。这是因为CSS的 width和 height属性与画布的 width和 height属性不是一回事儿。如果你通过样式来控制画布的大小,比如:

    1. canvas {
    
    2. height: 300px;
    
    3. width: 300px;
    
    4. }

    而画布会取其默认尺寸(300px × 150px),然后CSS属性又会把画布拉伸或压缩到它设置的大小,由此一来,画布中的内容就变形了。

    <canvas>元素同样可以通过CSS样式表设置边框和背景颜色,不过需要注意的是,CSS设置的背景颜色并不是画布中的背景颜色(画布仍然是透明背景),也就是说不会被保存成图片的背景颜色。

    二 准备绘图工具

    在开始绘图之前,需要两步关键操作:

    1. 获取 canvas对象

    2. 获取 canvas对象的二维绘图上下文 context对象:二维绘图上下文对象就好比绘图工具,拥有绘制矩形、文本、路径、曲线、嵌入图像等功能。

    三 基本绘图方法

    Canvas绘制和PS中的钢笔工具以及基本图形的绘制很相似,此外,还有图层的思想。 beginPath方法,就相当于新建一个图层。你可以把 canvas理解成编程版PS。

    四 绘制直线、路径、形状

    § 绘图上下文的属性: lineWidth(线条宽度)、 strokeStyle(线条颜色)、 lineCap(线头类型)、 fillStyle(填充颜色)、 lineJion(线段交点的形状)。这几个属性会一直影响后面的操作,除非再修改它的值。

    § beginPath() 每次调用这个方法,表明重新开始一个新的线段的绘制(路径与路径之间保持独立)。结束绘制并不一定要做什么,每次开始新的路径,原来的路径就会自动完成。另外,canvas在开始的时候会自动开始一段新路径。可类比为新建了一个图层,因为使用该方法后,再次设置的样式只对新建图层中的路径有用。

    § closePath():自动闭合路径,非常有用的一个方法。

    § moveTo()

    § lineTo()

    § stroke()

    § fill()

    § 绘制矩形的简便方法:

    o fillRect(x,y,width,height)和 strokeRect(x,y,width,height)

    o 或者先绘制 rect(),之后再填 充fill(),或者描边 stroke()

    五 绘制曲线

    § 绘制曲线的四个方法:能够以不同的方式绘制曲线,但是它们都要求你做一些简单的数学计算

    o arc()

    o artTo()

    o bezierCurveTo()

    o quadraticCurveTo()

    § 使用 arc()画不了椭圆,想要绘制椭圆:

    o 使用更复杂的绘制曲线的方法

    o 使用变换,把圆形拉伸成椭圆

    § artTo()、 bezierCurveTo()、 quadraticCurveTo()这三个方法需要用到同一个概念:控制点。控制点并不包含在最终的曲线中,但是会影响到曲线的最终形状。(类比于PS软件中的钢笔工具。)

    § quadraticCurveTo():

    o 贝塞尔曲线,这种曲线能够保持平滑,哪怕再小再大的弧度都可以

    o 一条贝塞尔曲线有两个控制点。控制点与曲线端点的连线与曲线相切,控制点与曲线端点的连线越长,曲线的弯曲度越大(因为相切的程度越大)。如果熟悉钢笔工具中的贝塞尔曲线绘制,会很容易理解。

    六 变换:变换的是坐标系

    § 变换就是一种通过变化 <canvas>坐标系达到绘制目的的技术

    § 变换是可以累积的

    § 变换的应用:绘图代码不变,反复改变坐标系,结果可以是动画(鸟儿飞起来),可以是复杂的图案(比如螺旋线、旋转的正方形图案,如下图所示)

    § § 除了平移(translate)之外,还有缩放(scale)变换、旋转(rotate)变换和矩阵(matrix)变换

    § 当坐标系发生变换后,如何恢复到某个变换之前的状态?比如恢复到最终的原始状态?

    o 调用绘图上下文的 save方法保存坐标系当前的状态:因为保存的是当前的状态,所以就需要在你想要恢复的坐标系状态发生变化前调用这个方法。比如,你希望恢复到原始状态,那么就需要一开始变换之前就只用 save方法。

    o 使用 restore方法,可以恢复到前一个最近状态。状态列表是栈这种数据结构:只能在栈顶操作,不能任意操作。

    七 透明度

    § canvas支持半透明颜色

    § 可用于实现:多个形状叠加透视的效果

    § 两种创建透明图形的方式:

    o 使用 rgba函数设置 strokeStyle和 fillStyle

    o 设置绘图上下文的 globalAlpha属性

    o 如果你只需要一种透明的颜色,使用 rgba()就可以了;如果你需要使用不同的颜色,不同的透明度,可以使用 globalAlpha。另外,如果你想在 canvas上绘制半透明的图像,也要用到 globalAlpha。

    八 合成操作

    § 所谓合成,可类比理解成集合的运算:交集、并集、补集。

    § 默认的合成操作是source-over:新绘制的图形位于旧的之上(覆盖在先绘制的图形的上面)

    § 在合成操作的术语中:源指正在绘制的图形,目标是已经绘制的内容

    § 好处:

    o 迅速实现一些特定的绘图任务

    o 利用合成操作减少绘图操作次数,以提升绘图性能

    九 获取画布数据

    获取画布数据的方式有三种:

    § 使用数据URL: 把画布转换成一幅图像文件,然后将图像数据转换成字符序列并编码为URL形式。这种形式非常适合传输图像(例如可以将数据URL作为元素的src值,或者也可以将其发送到web服务器)。

    § 使用 getImageData方法:取得原始的像素数据,然后可以继续根据需要操作这些数据。

    § 保存一组“步骤”:比如,可以把在画布上绘制的每一条线都保存在一个数组中,然后保存这个数组,以便将来根据该数组重新绘制图像

    举个例子,如果采用的是数据URL方案:

    1. var url = canvas.getDataURL();

    2. // 可以传入你期望保存的图像MIME类型

    3. var url = canvas.getDataURL("image/jpeg");

    有了数据URL后,如果只想保存到客户端,可以在新窗口中打开图像,或者交给一个元素。

    十 Canvas的兼容性处理

    Canvas是目前得到较好支持的HTML5功能,主流浏览器的所有最新版本都支持它。

    如何保证不把IE7和IE8排除在外?为了保证兼容性,我们有两个选择:

    § 检测浏览器是否支持新功能,不支持则提供后备内容;

    § 选择利用第三方工具来模仿HTML5的 <canvas>,做到一个页面也能在旧版本浏览器中运行。

    具体到 <canvas>,第二个选择是首选。

    以上就是小编今天为大家分享的关于HTML5工具canvas的基础篇,希望本篇文章能够对喜欢HTML5技术的你有所帮助,想要了解更多关于HTML5相关知识的话欢迎关注达内HTML5培训官网。

    【免责声明:本文图片及文字信息均由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】

  • 上一篇:想学HTML5游戏开发,技能树应该怎么点?

    下一篇:有了这些教程,不报HTML5培训班也能自学HTML5

网站导航
2002-2018 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56