基础知识

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核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版​

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

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

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

  3. HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版​

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. Linux内核设计第七周 ——可执行程序的装载

    Linux内核设计第七周 ——可执行程序的装载 第一部分 知识点总结 一.预处理.编译.链接和目标文件的格式 1.可执行程序是怎么得来的 编译链接的过程 预处理阶段 gcc -E -o XX.cpp ...

  2. Velocity模板引擎语法

    Velocity 模板引擎介绍 Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template language)来引用由java ...

  3. RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件Web业务平台

    RDIFramework.NET ━ .NET快速信息化系统开发框架  工作流程组件Web业务平台 接前两篇: RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件介 ...

  4. WCF服务接口多，客户端在引用时出错！报WCF The maximum nametable character count quota (16384) has been exceeded while reading XML data错误

    WCF服务接口多,客户端在引用时出错!报WCF The maximum nametable character count quota (16384) has been exceeded while ...

  5. Lua自己实现string.split功能

    local function split(str, d) --str是需要查分的对象 d是分界符 local lst = { } local n = string.len(str)--长度 local ...

  6. 解决MyEclipse报错问题

    转载文章.   做NC的时候从别人那拷了个NC_DEMO结果我这报错他那没报错  import nc.bs.wfengine.engine.ext.TaskTopicResolver;  报错信息:A ...

  7. IPC

    IPC，全名Inter Process Communication即进程间通讯，在同一台机器上的两个进程就用IPC，不能跨物理机器。IPC包括共享内存、队列、信号量等几种方式，由于IPC通讯效率之高， ...

  8. 图片按钮来代替文件上传控件（Freemaker，JQuery，HTML，CSS，JavaScript）

    CSS样式: <style type="text/css"> .fileInputContainer{ height:70px; width:95px; positio ...

  9. enbale blakboxing

    chrome://flags/#enable-devtools-experiments

  10. ASP.NET下载远程图片保存到本地的方法、保存抓取远程图片

    以下介绍两种方法:1.利用WebRequest,WebResponse 类 WebRequest wreq=WebRequest.Create("http://www.xueit.com/e ...