Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识
基础知识
canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的。该环境对象可以从canvas元素身上获得。
<body><canvas id="canvas"> 不支持显示的文字</canvas> </body> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); </script>
在默认情况下,浏览器所创建的元素大小是300像素宽,150像素高。可以通过在canvas标签上直接属性width,height 来设置该值,不要写 px
当然也可以通过CSS设置width,height。但是通过CSS设置的是会造成Drawing Surface 的缩放。
canvas元素大小和绘制表面大小
使用css设置canvas元素大小与直接设置属性相比,其差别是基于这样一个事实:canvas元素实际上有两套尺寸,一个是元素本身的大小,一个是元素绘制表面(drawing surface)的大小。
当设置元素的width,height属性的时候,实际上同时修改了该元素本身的大小和元素绘制表面的大小。然后通过css设置canvas来设置width,height 只是修改元素大小本身,而不会影响绘制表面的大小。在默认情况下,canvas元素与绘制表面都是300像素宽,150像素高。如果用css来设置canvas的width,height,
那么canvas的绘制表面还是300,150. 浏览器将缩放绘制表面的大小来适应元素本身的大小。如果是这样,很可能导致奇怪的,无用的效果。
canvas元素的API
canvas本身只有2个属性,3个方法
1.属性:width,height
2.方法:
a.getContext(), 返回与该canvas元素相关的绘图环境对象,每个canvas元素均有一个这样的环境对象,而且每个环境对象均与一个canvas元素相关联
b.toDataURL(type,quality), 返回一个数据地址(data url),你可以将它设定为img 元素的src属性值,第一个参数指定了图像的类型,例如image/jpeg 或image/png ,如果不指定那么默认image/png. 第二个参数必须在0~1之间的值,表示图像的质量。
c.toBlob(callback,type,args) 创建一个用于表示此canvas的blob对象。
CanvasRenderingContext2D对象
canvas.getContext()返回的是CanvasReanderingContext2d函数的一个实例。该对象所包含的属性如下:
- canvas:指向该绘图环境所属的canvas对象。该属性最常见的用途是获取width和height。分别调用context.canvas.width 和context.canvas.height
- fillStyle:指定该绘图环境在后续的图形填充操作中所使用的颜色,渐变色或图案
- font:设定在调用绘图环境对象的fillText()或strokeText()时所用的字体
- globalAlpha:全局透明度设定,它可以取0~1 之间的值,浏览器会将每个对象的alpha值与该值相乘。在绘制图像的时候也是如此
- globalCompsiteOperation:该值决定浏览器将某个物体绘制在其他物体时,所采用的绘制方式。(有效取值:稍后)
- lineCap:该值告诉浏览器如何绘制线段的端点,可以在以下三个值中指定一个:butt,round,square. 默认值是 butt
- lineWidth:该值决定了在canvas之中绘制线段的屏幕像素宽度。默认值1.0
- lineJoin:告诉浏览器在两条线段相交时如何绘制焦点。可取的值是:bevel,round,miter。默认值是miter
- miterLimit:告诉浏览器如何绘制miter形式的线段焦点
- shadowBlur:该值决定了浏览器如何延伸阴影效果,值越高,阴影效果延伸的就越远。 该值是高斯方程式的一个参数
- shadowColor:该值告诉浏览器使用何种颜色来绘制阴影。通常采用半透明色
- shadowOffsetX:以像素为单位,指定了阴影效果的水平方向偏移量
- shadowOffsetY:以像素为单位,指定了阴影效果的水平方向偏移量
- strokeStyle:指定了对路径进行描边的时候采用的绘制风格。该值可被设定成一个颜色,渐变色。或图案
- textAlign:决定了fillText()或strokeText(),所画文本的水平对齐方式
- textBaseline:决定了fillText()或strokeText(),所画文本的垂直对齐方式
3d绘图环境webGL简介
在canvas中,有一个与2d绘图环境对应的3d绘图环境,叫做webGL,他完成符合OpenGL ES 2.0的api。可以查看下面的网址,访问有KHRONOS GROUP 维护的webGL标准:http://www.khronos.org/registry/webgl/specs/latest/
canvas状态的保存和恢复
前面谈了canvas绘图环境context的所有属性,在进行绘图操作的时候,需要频繁的设置这些值。很多时候只是想临时改变这些属性。比如说,可能需要在背景中绘制细网格线,然后用粗一些的线条画网格里面的内容。在这种情况下,需要于绘制网格线时临时性地修改lineWidth属性。canvas的API提供了两个名叫save(),restore()的方法,用户保存以及恢复canvas绘图环境的所有属性。可以像下面这样使用这两个方法:
function DrawGrid(){context.save();context.fillStyle=fillStyle;.....context.restore();}
绘图环境的save()方法会将当前的绘图环境压入堆栈顶部,对应的restore()方法则从堆栈顶部弹出一组状态信息,并据此恢复当前绘图环境的各个状态。这意味着可以嵌套地调用save()/restore() 方法
基于脚本的定时控制动画(Timing control fro script-based animation)
长久以来,开发者一直使用window.setInterval() ,window.setTimeOut() 方法来制作基于网络的动画。然后这些方法并不适用于对性能要求很高的动画,应该使用window.requestAnimationFrame() 方法来取代他们。
转载于:https://www.cnblogs.com/btgyoyo/p/6180394.html
Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识相关推荐
- HTML5 Canvas核心技术:图形.动画与游戏开发
<HTML5 Canvas核心技术:图形.动画与游戏开发> 基本信息 原书名:Core HTML5 Canvas: Graphics, Animation, and Game Develo ...
- 《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
<HTML5 Canvas核心技术 图形.动画与游戏开发> 读书笔记 文章目录 <HTML5 Canvas核心技术 图形.动画与游戏开发> 读书笔记 第1章 基础知识 第2章 ...
- HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版
HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...
- Unity游戏开发基础知识(新手必看)
内容会持续更新,有错误的地方欢迎指正,谢谢! 0.Unity最大的优点 unity提供的最大优点就是跨平台. 以前项目移植很麻烦,现在只要一份代码,然后注意平台差异就好了. 1.灯光类型 平行光:Di ...
- 游戏开发基础知识——“庆典活动”的设计
我们经常可以在游戏中见到各种各样的"仪式与活动",比如召唤强大的生物基本上都需要通过专属的"召唤仪式",安抚战争中阵亡将士的亡魂会有祭奠仪式,某一阵营的军队在出 ...
- 使用HTML5 canvas做地图(1)基础知识
之前一直想使用HTML5技术全新做一套地图API,可是苦于时间和精力,迟迟未有行动.后来下定决心,利用下班和周末做出一个大体框架出来,现在和网友分享一下自己的整体的一个思路和想法.欢迎大家提出宝贵建议 ...
- 游戏开发基础知识之垂直同步V-Sync
什么是垂直同步V-Sync 垂直同步是显卡提供的一个功能,目的是将游戏帧率和显示器的刷新率进行同步.当开启V-Sync后,显卡会等待显示器本轮刷新完成,在这期间,显卡不会向显示器传输任何数据,并且通过 ...
- 游戏开发基础知识——音效和音乐的作用
成功的游戏都会追求音效和音乐的完美使用,这会让一款游戏的表现更上一个层次.无论是自然的,机械的还是静默效果,在不同场景中都会有其独特的用法.从<超级马里奥>里面经典的背景音乐和" ...
- 3D游戏开发基础-姜雪伟-专题视频课程
3D游戏开发基础-23042人已学习 课程介绍 该课程从游戏开发基础知识讲解,包括向量,矩阵,以及固定流水线,可编程流水线,GPU编程等,通过该课程的学习可以让大家对游戏开发原理以及游 ...
最新文章
- 计算机中的数制和编码教案,计算机《数制与编码进制转换》公开课教案.doc
- 【组合数学】递推方程 ( 非齐次部分是指数的情况 | 非齐次部分是指数的情况示例 )
- Java sqlite事务方法,Java SQLiteDatabase.insert方法代码示例
- VR: AR和VR演进哲学
- 负数比较大小_人教版六下【第一单元】负数比较负数的大小
- asp连接mysql oledb_provider=microsoft.jet.oledb……数据库连接方法的疑惑?
- java8泛型包括_JAVA8 获取泛型类型问题
- HTML添加背景音乐代码
- Golang(2)win10下安装Go语言
- 不会真有人觉得在广州、深圳这样的城市月薪过万很容易吧
- Android SMB 简单几步实现手机给电脑传输数据
- 目标检测2020-2021
- upupoo视频使用Java代码下载
- 有多少“垃圾”App藏在你的手机里?
- C# API POST与GET的调用
- 【SQL Server数据库】建库、建表、简单查询语句(一)
- Opencv环境的配置与基本使用
- 基于MACA协议(MAC协议)的仿真来学习opnet的一些记录
- Golang的五种字符串拼接方式
- Windows每个版本自带的.NET版本,与支持的最高.NET版本