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

事件处理:

HTML5应用程序是以事件来驱动的,可以在canvas中增加一个事件监听器,当事件发生时,浏览器就会调用这个监听器

//方法一
canvas.onmousedown=function(e){
//一些代码
};

//方法二
canvas.addEventListener(‘mousedown‘,function(e){
//一些代码
})

基础的数学知识简介:

代数方程:(10x+5)x2=110

三角函数:180°等于π弧度

正弦、余弦、正切:

sin(α)对边/斜边

cos(α)邻边/斜边

tan(α)对边/邻边

向量运算:大小和方向

勾股定理,任何直角三角形的斜边,等于另外两边平方和的平方根

长度为一个单位(即模为1)的向量,叫做单位向量

向量的加减

向量的点积(用以判断物体碰撞后移动方向)

一帧就是一副静止的画面,连续的帧就形成动画

第二章 绘制

坐标系统:默认情况下,Canvas的坐标以canvas左上角为原点,X坐标向右增长,Y坐标向下延伸

矩形的绘制:Canvas的API提供了三个方法,分别用于矩形的清除、描边和填充

clearRect(double x,double y,double w,double h)(左上角x,y坐标,矩形的宽度和高度)

strokeRect(double x,double y,double w,double h)

fillRect(double x,double y,double w,double h)

颜色与透明度:

可以通过绘图环境的strokeStyle与fillStyle属性来设置

context.strokeStyle=‘red‘;

context.fillStyle=‘rgba(0,0,255,0.5)‘;

HSL格式的颜色相对于RBG来说更直观,RGB以硬件为导向(阴极射线管),HSL三个分量分别是色相、饱和度、亮度

渐变色与图案:

除了颜色值以外,strokeStyle与fillStyle也支持渐变色与图案

linear(线性渐变)与radial(放射渐变)

createLinearGradient()方法来创建线性渐变,需要向该方法传入两个点的x、y坐标(共4个),两点之间的连线就是canvas建立颜色渐变效果的依据,调用createLinearGradient()方法后返回一个CanvasGradient实例,将该实例作为fillStyle的值

context.fillStyle=gradient;

CanvasGradient有一个唯一的方法addColorStop(),向渐变色中增加5个“颜色停止点”,接收两个参数,一个是0~1.0之间的double值,代表颜色停止点在渐变线上的位置,另一个是DOMString类型的CSS3颜色字串值(颜色单词)

createRadialGradient()方法实现放射渐变,比createLinearGradient()多两个半径参数

图案:

Canvas元素也允许使用图案对图形和文本进行描边与填充,图案可以是image元素、canvas元素或video元素

createPattern()方法来创建图案,接收两个参数:图案本身、一个表示重复方式的字符串(repeat、repeat-x、repeat-y、no-repeat)

阴影:

不管是画的是图像还是文本,都可以通过修改绘图环境中的属性值来指定阴影效果

shadowColor:CSS3格式的颜色(设置为undefined会禁用阴影)

shadowOffsetX:从图形或文本到阴影的水平偏移(设为负值则是向左)

shadowOffsetY:从图形或文本到阴影的垂直偏移(设为负值则是向上)

shadowBlur:表示高斯模糊的数值(整数)

路径、描边与填充:

封闭路径(closed path)

开发路径(open path)

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

时间: 2024-10-18 13:42:20

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf2的相关文章

HTML5 Canvas核心技术图形动画与游戏开发(读书笔记)----第一章,基础知识

一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas" width="600" height="300">您的浏览器不支持canvas,可以选择升级您的浏览器</canvas> 2 开发基于canvas的应用程序的最基本的几个操作 1),使用document.getElementById()方

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

第6章 精灵 精灵(sprite),它是一种可以集成入动画之中的图像对象,赋予它们各种行为,精灵并非Canvas API的一部分,,但都是从它衍生而来 本章将会实现三种设计模式:策略模式(精灵与绘制器解耦).命令模式(精灵的动作).享元模式(一个实例表示多个精灵) painter属性是一个指向Painter对象的引用,使用paint(sprite,context)方法来绘制精灵,behaviors属性指向一个对象数组,数组中每个对象都会以execute(sprite,context,time)方

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

文本的定位 水平与垂直定位:当使用strokeText()和fillText()绘制文本时,指定了所绘文本的X与Y坐标,还有textAlign与textBaseline两个属性 textAlign:start(默认) center end left right,当canvas元素的dir属性是ltr时,left效果与start相同,right与end相同,如果dir属性是rtl,则相反 textBaseline:top bottom middle alphabetic(默认,基于拉丁字母) id

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

CanvasRenderingContext2D对象中用于平移.旋转坐标系的方法 镜像 scale(1,-1)绘制垂直镜像:scale(-1,1)绘制水平镜像 自定义的坐标变换 transform(),多次调用会叠加效果 setTransform(),每次调用都会清除上次的效果 两个方法都用于旋转.缩放.及平移坐标系(可以根据公式传入0或其他数据) x'=ax+cy+e y'=bx+dy+f 坐标系旋转公式(angle弧度) x'=x×cos(angle)-(y×sin(angle)) y'=y

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

canvas元素可以说是HTML5元素中功能最强大的一个,它真正的能力是通过Canvas的context对象(绘图上下文)表现出来的 fillText()方法使用fillStyle属性来填充文本中的字符,strokeText()方法使用strokeStyle属性描绘字符的轮廓线,fillStyle属性和strokeStyle属性可以是CSS格式的颜色.渐变色或是图片 fillText()与strokeText()方法都需要3个参数:要绘制的文本内容,以及在canvas中显示文本的横.纵坐标 注意

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

性能 运行putImageData()比drawImage()慢,同等条件下优先考虑drawImage() 操作图像数据需要遍历大量数据,应该注意几点: 1)避免在循环体中直接访问对象属性,应当保存在局部变量中 2)应该用循环计数器遍历完整的像素,而非像素分量(每4个一组) 3)逆向遍历与移位技巧效果并不好 4)不要频繁使用getImagedata() 视频处理 var video=document.getElementById('video'); //A <video>element ...

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

路径与子路径 在某一时刻,canvas之中只能有一条路径存在,Canvas规范称之为“当前路径”(current path),这条路径却可以包含很多子路径(subpath),子路径是由两个或者更多点组成的 context.beginPath(); context.rect(10,10,100,100); context.stroke(); context.beginPath(); //清除上次调用rect()方法所创建的路径 context.rect(50,50,100,100); contex

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

操作图像的像素:getImageData() putImageData() ImageData对象 调用getImageData()方法实际是获取了一个指向ImageData对象的引用,返回的对象包含3个属性:1)width以设备像素为单位的图像数据宽度 2)height以设备像素为单位的图像数据高度 3)data包含各个设备像素数值的数组 width和height都是只读的无符号长整数,data属性包含的每个数组元素都表示图像数据中相应的像素值,每个值包含的颜色分量都是含有8个二进制位的整数(

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

HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程序直接切入这套API,全面讲解其功能,以求让读者实现出内容丰富且界面一致的网络应用程序,并将开发好的程序部署在多种设备及操作系统之上. 教程地址:HTML5 Canvas核心技术:图形.动画与游戏开发 PDF扫描版? HTML5 Canvas核心技术:图形.动画与游戏开发 目录: 前言 第1章 基础知识 1.