Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识

时间：2022-09-17 22:39:18

基础知识

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() 方法来取代他们。

Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识的更多相关文章

  1. HTML5 Canvas核心技术图形动画与游戏开发 &lpar;&lpar;美&rpar;David Geary&rpar; 中文PDF扫描版&ZeroWidthSpace;

    <html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...

  2. HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

  3. HTML5 Canvas核心技术&colon;图形、动画与游戏开发 PDF扫描版&ZeroWidthSpace;

    HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...

  4. HTML5 Canvas核心技术—图形、动画与游戏开发&period;pdf2

    事件处理: HTML5应用程序是以事件来驱动的,可以在canvas中增加一个事件监听器,当事件发生时,浏览器就会调用这个监听器 //方法一canvas.onmousedown=function(e){ ...

  5. HTML5 Canvas核心技术—图形、动画与游戏开发&period;pdf8

    第6章 精灵 精灵(sprite),它是一种可以集成入动画之中的图像对象,赋予它们各种行为,精灵并非Canvas API的一部分,,但都是从它衍生而来 本章将会实现三种设计模式:策略模式(精灵与绘制器 ...

  6. HTML5 Canvas核心技术—图形、动画与游戏开发&period;pdf7

    性能 运行putImageData()比drawImage()慢,同等条件下优先考虑drawImage() 操作图像数据需要遍历大量数据,应该注意几点: 1)避免在循环体中直接访问对象属性,应当保存在 ...

  7. HTML5 Canvas核心技术—图形、动画与游戏开发&period;pdf6

    操作图像的像素:getImageData() putImageData() ImageData对象 调用getImageData()方法实际是获取了一个指向ImageData对象的引用,返回的对象包含 ...

  8. HTML5 Canvas核心技术—图形、动画与游戏开发&period;pdf1

    canvas元素可以说是HTML5元素中功能最强大的一个,它真正的能力是通过Canvas的context对象(绘图上下文)表现出来的 fillText()方法使用fillStyle属性来填充文本中的字 ...

  9. HTML5 Canvas核心技术—图形、动画与游戏开发&period;pdf5

    文本的定位 水平与垂直定位:当使用strokeText()和fillText()绘制文本时,指定了所绘文本的X与Y坐标,还有textAlign与textBaseline两个属性 textAlign:s ...

随机推荐

  1. memcached安装配置&plus;基础操作

    先安装依赖关系 下载libevent-2.0.21-stable.tar.gz wget https://github.com/downloads/libevent/libevent/libevent ...

  2. nodejs 批量修改、删除

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQhCAIAAABDaAVHAAAgAElEQVR4nOydeXxU5aH359733vd9b/ ...

  3. php&plus;mysql 除了设置主键防止表单提交内容重复外的另一种方法

    感觉好久没有更新博客了,一直在做网站及后台,也没有遇到让我觉得可以整理的内容,之前做的一个系统,已经完成了,后来客户又要求加一个功能,大概就是表单提交的时候,约束有一项不能和以前的内容重复,如图 比如 ...

  4. ArcGIS API for JavaScript 4&period;2学习笔记&lbrack;17&rsqb; 官方第七章Searching（空间查询）概览与解释

    空间分析和空间查询是WebGIS有别于其他Web平台的特点.到这一章,就开始步入空间分析的内容了. [Search widget] 介绍空间查询的核心小部件"Search". [S ...

  5. 基于hashicorp&sol;raft的分布式一致性实战教学

    本文由云+社区发表 作者:Super 导语:hashicorp/raft是raft算法的一种比较流行的golang实现,基于它能够比较方便的构建具有强一致性的分布式系统.本文通过实现一个简单的分布式缓 ...

  6. Django------多表操作

    一. 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对一的 ...

  7. HTML基本入门完成

    四. (一)丶下拉框select元素:一般可以创建单选或多选菜单.<select>与<option>一般同时使用,select代表下拉框,option代表他的每一项. 1.基本 ...

  8. Gym 101194L &sol; UVALive 7908 - World Cup - &lbrack;三进制状压暴力枚举&rsqb;&lbrack;2016 EC-Final Problem L&rsqb;

    题目链接: http://codeforces.com/gym/101194/attachments https://icpcarchive.ecs.baylor.edu/index.php?opti ...

  9. ES6新特性三： Generator&lpar;生成器&rpar;函数详解

    本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...

  10. Echarts 地图上显示数值

    Echarts 地图上展示数值,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', ...

相关文章