本文目录一览：
- 1、如何实现canvas的图片轮播
- 2、JS中canvas画布绘制中如何实现缩放，位移，旋转
- 3、《JS原理、方法与实践》- canvas动画
- 4、JS之使用Canvas绘图
- 5、html5 Canvas 如何自适应屏幕大小？
- 6、canvas 自适应屏幕的问题，能否铺满整个屏幕，并且画布不是等比例放大？
如何实现canvas的图片轮播
图片自动滑动效果很多网站都要用，最近在学html5就拿这个练练手，发现用canvas实现起来其实很简单。代码比较粗糙，有很多改进的地方，不过还是先记录一下。
一. html文件
[html] view
plaincopy
!DOCTYPE html
html lang="en"
head
meta charset="utf-8"/
titleHTML5 Images Slider/title
script src=""/script
script src="test.js"/script
link href="style.css" rel="stylesheet" /
/head
body
div id="container"
canvas id="imgs" width="500" height="300" onclick="canvasClick()"/canvas
/div
div class="imgGallery"
span class="cover"img src="1.jpg" id="img1" width="125" height="150" onclick="iconClick(this.id)"/span
img src="2.jpg" id="img2" width="125" height="150" onclick="iconClick(this.id)"
img src="3.jpg" id="img3" width="125" height="150" onclick="iconClick(this.id)"
img src="4.jpg" id="img4" width="125" height="150" onclick="iconClick(this.id)"
/div
/body
footer
/footer
/html
二. js文件，名字test.js
[javascript] view
plaincopy
var images = new Array();
var cIndex = 0;
var speed = 5;
var context;
var canvas;
var currentImage;
var width=300;
var height=300;
var stopX = 95;
var stopY = 0;
var autoTimeout;
var manuTimeout;
var interval;
var img1;
var img2;
var img3;
var img4;
var timeoutInterval = 5;
function slideImage(id,x,y,imgObj){
this.speed = speed;
this.preImage = null;
this.nextImage = null;
this.imgObj=imgObj;
this.x=x;
this.y=y;
this.direction="right";
this.id = id;
}
function buttonNext(x,y,bwidth,bheight){
this.x = x;
this.y = y;
this.width = bwidth;
this.height = bheight;
}
$(document).ready(
function(){
InitImages();
canvas = document.getElementById("imgs");
context = canvas.getContext("2d");
//移动图片
context.drawImage(currentImage.imgObj,currentImage.x,currentImage.y,width,height);
context.drawImage(currentImage.preImage.imgObj,currentImage.preImage.x,currentImage.preImage.y,width,height);
context.drawImage(currentImage.nextImage.imgObj,currentImage.nextImage.x,currentImage.nextImage.y,width,height);
context.fillStyle="rgba(100,150,185,0.5)";
context.fillRect(0,0,100,height);
context.fillRect(400,0,100,height);
interval = setTimeout("intervalSlide()", 20);
}
);
function drawFrame(){
context.clearRect(0,0,canvas.width,canvas.height);
//调用beginPath()确保不会接着上次绘制的图形绘制
context.beginPath();
context.drawImage(currentImage.imgObj,currentImage.x,currentImage.y,width,height);
context.drawImage(currentImage.preImage.imgObj,currentImage.preImage.x,currentImage.preImage.y,width,height);
context.drawImage(currentImage.nextImage.imgObj,currentImage.nextImage.x,currentImage.nextImage.y,width,height);
context.drawImage(currentImage.preImage.preImage.imgObj,currentImage.preImage.preImage.x,currentImage.preImage.preImage.y,width,height);
//遮罩
context.fillStyle="rgba(100,150,185,0.5)";
context.fillRect(0,0,100,height);
context.fillRect(400,0,100,height);
//每一帧的位置变动
currentImage.x -= speed;
currentImage.preImage.x -= speed;
currentImage.nextImage.x -= speed;
currentImage.preImage.preImage.x -= speed;
if(currentImage.x == 200){
currentImage.nextImage.x = 500;
}
//到达指定位置停止变动
if(currentImage.x != stopX){
autoTimeout = setTimeout("drawFrame()",timeoutInterval);
}
else{
}
}
function InitImages(){
img1 = new slideImage("img1",-200,0,document.getElementById("img1"));
img2 = new slideImage("img2",100,0,document.getElementById("img2"));
img3 = new slideImage("img3",400,0,document.getElementById("img3"));
img4 = new slideImage("img4",700,0,document.getElementById("img4"));
img1.preImage = img4;
img1.nextImage = img2;
img2.preImage= img1;
img2.nextImage= img3;
img3.preImage=img2;
img3.nextImage=img4;
img4.preImage = img3;
img4.nextImage = img1;
currentImage=img2;
hilightSelectedImg();
}
function canvasClick(){
currentImage = currentImage.nextImage;
manuTimeout = setTimeout("drawFrame()",timeoutInterval);
}
function intervalSlide(){
currentImage = currentImage.nextImage;
hilightSelectedImg();
autoTimeout = setTimeout("drawFrame()", timeoutInterval);
setTimeout("intervalSlide()", 5000)
}
function iconClick(obj){
if(obj == "img1"){
currentImage = img1;
}
else if(obj == "img2"){
currentImage = img2;
}
else if(obj == "img3"){
currentImage = img3;
}
else if(obj == "img4"){
currentImage = img4;
}
currentImage.preImage.x = 100;
currentImage.preImage.preImage.x = -200;
currentImage.x = 400;
hilightSelectedImg();
manuTimeout = setTimeout("drawFrame()",timeoutInterval);
}
function hilightSelectedImg(){
img1.imgObj.width = 125;
img1.imgObj.height = 150;
img1.imgObj.style.opacity = 0.5;
img2.imgObj.width = 125;
img2.imgObj.height = 150;
img2.imgObj.style.opacity = 0.5;
img3.imgObj.width = 125;
img3.imgObj.height = 150;
img3.imgObj.style.opacity = 0.5;
img4.imgObj.width = 125;
img4.imgObj.height = 150;
img4.imgObj.style.opacity = 0.5
currentImage.imgObj.width = 150;
currentImage.imgObj.height = 175;
currentImage.imgObj.style.opacity = 1;
}
三. css文件。style.css
[css] view
plaincopy
canvas {
border:1px dashed black;
}
.imgGallery{
width:550px;
position:absolute;
height:170px
}
img{
opacity:0.5;
}
JS中canvas画布绘制中如何实现缩放，位移，旋转
cxt.scale(2,2);
缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。
ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置
x： 添加到水平坐标（x）上的值
y： 添加到垂直坐标（y）上的值
发生位移后，相当于把画布的0,0坐标 更换到新的x,y的位置，所有绘制的新元素都被影响。
位移画布一般配合缩放和旋转等。
context.rotate(angle); 方法旋转当前的绘图
注意参数是弧度（PI）
如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
《JS原理、方法与实践》- canvas动画
动画是由多幅连续的图片组成，按顺序切换不同的图片给人一种动画的感觉，切换的速度越快动画的感觉越真实，当速度达到1秒24幅图片的时候，人的肉眼就无法分辨了，这就是所说的24帧。canvas中的动画其实就是循环执行擦除和绘制的操作，并且一般会在操作之前保存环境，操作之后恢复环境。
使用canvas制作动画由两个关键点：循环执行，绘制每次显示的图片。循环执行主要有两种方式，一种是使用前面所学过的setInterval或者setTimeout方法；另一种是调用新增加的专门用于动画的requestAnimationFrame方法，这个方法不需要设置间隔时间，直接将处理逻辑写入参数的回调函数中就可以了。但是requeseAnimationFram自身需要被放到回调函数中，另外，它的启动操作可以用cancelAnimationFrame方法来取消。
示例：
JS之使用Canvas绘图
canvas 元素负责在页面中设定一个区域，然后就可以通过 JavaScript 动态地在这个区域中绘制图形。
要使用 canvas 元素，必须先设置其 width 和 height 属性，指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息，如果浏览器不支持 canvas 元素，就会显示这些信息。
如果不添加任何样式或者不绘制任何图形，在页面中是看不到该元素的。
要在这块画布（canvas）上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用getContext() 方法并传入上下文的名字。传入 "2d" ，就可以取得 2D 上下文对象。
使用 toDataURL() 方法，可以导出在 canvas 元素上绘制的图像。这个方法接受一个参数，即图像的 MIME 类型格式，而且适合用于创建图像的任何上下文。
取得画布中的一幅 PNG 格式的图像：
如果绘制到画布上的图像源自不同的域， toDataURL() 方法会抛出错误。
使用 2D 绘图上下文提供的方法，可以绘制简单的 2D 图形，比如矩形、弧线和路径。2D 上下文的坐标开始于 canvas 元素的左上角，原点坐标是(0,0)。
2D 上下文的两种基本绘图操作是填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填充图形；描边，就是只在图形的边缘画线。大多数 2D 上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性： fillStyle 和 strokeStyle 。
这两个属性的值可以是字符串、渐变对象或模式对象，而且它们的默认值都是 "#000000" 。如果为它们指定表示颜色的字符串值，可以使用 CSS 中指定颜色值的任何格式，包括颜色名、十六进制码、rgb 、 rgba 、 hsl 或 hsla 。
与矩形有关的方法包括 fillRect() 、strokeRect() 和 clearRect() 。这三个方法都能接收 4 个参数：矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。
fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过 fillStyle 属性指定：
strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过 strokeStyle 属性指定。
描边线条的宽度由 lineWidth 属性控制，该属性的值可以是任意整数。另外，通过 lineCap 属性可以控制线条末端的形状是平头、圆头还是方头（ "butt" 、"round" 或 "square" ），通过 lineJoin 属性可以控制线条相交的方式是圆交、斜交还是斜接（ "round" 、 "bevel" 或 "miter" ）。
clearRect() 方法用于清除画布上的矩形区域。本质上，这个方法可以把绘制上下文中的某一矩形区域变透明。
通过路径可以创造出复杂的形状和线条。要绘制路径，首先必须调用 beginPath() 方法，表示要开始绘制新路径。然后，再通过调用下列方法来实际地绘制路径。
如果想绘制一条连接到路径起点的线条，可以调用closePath() 。如果路径已经完成，你想用 fillStyle 填充它，可以调用 fill() 方法。另外，还可以调用 stroke() 方法对路径描边，描边使用的是 strokeStyle 。最后还可以调用 clip() ，这个方法可以在路径上创建一个剪切区域。
绘制一个不带数字的时钟表盘：
isPointInPath() 方法接收 x 和 y 坐标作为参数，用于在路径被关闭之前确定画布上的某一点是否位于路径上。
绘制文本主要有两个方法： fillText() 和 strokeText() 。这两个方法都可以接收 4 个参数：要绘制的文本字符串、x 坐标、y 坐标和可选的最大像素宽度。
两个方法都以下列 3 个属性为基础：
fillText() 方法使用fillStyle 属性绘制文本， strokeText() 方法使用 strokeStyle 属性为文本描边。
通过上下文的变换，可以把处理后的图像绘制到画布上。2D 绘制上下文支持各种基本的绘制变换。创建绘制上下文时，会以默认值初始化变换矩阵，在默认的变换矩阵下，所有处理都按描述直接绘制。为绘制上下文应用变换，会导致使用不同的变换矩阵应用处理，从而产生不同的结果。
把原点变换到表盘的中心：
使用 rotate() 方法旋转时钟的表针：
可以调用 save() 方法，调用这个方法后，当时的所有设置都会进入一个栈结构，得以妥善保管。调用 restore() 方法，在保存设置的栈结构中向前返回一级，恢复之前的状态。
save() 方法保存的只是对绘图上下文的设置和变换，不会保存绘图上下文的内容。
可以使用 drawImage()方法把一幅图像绘制到画布上。
以使用三种不同的参数组合。最简单的调用方式是传入一个 HTML img 元素，以及绘制该图像的起点的 x 和 y 坐标。
如果想改变绘制后图像的大小，可以再多传入两个参数，分别表示目标
宽度和目标高度。通过这种方式来缩放图像并不影响上下文的变换矩阵。
绘制出来的图像大小会变成 20×30 像素。
可以选择把图像中的某个区域绘制到上下文中。 drawImage() 方法的这种调用方式总共需要传入 9 个参数：要绘制的图像、源图像的 x 坐标、源图像的 y 坐标、源图像的宽度、源图像的高度、目标图像的 x 坐标、目标图像的 y 坐标、目标图像的宽度、目标图像的高度。这样调用drawImage() 方法可以获得最多的控制。
2D 上下文会根据以下几个属性的值，自动为形状或路径绘制出阴影。
要创建一个新的线性渐变，可以调用 createLinearGradient() 方法。这个方法接收 4 个参数：起点的 x 坐标、起点的 y 坐标、终点的 x 坐标、终点的 y 坐标。调用这个方法后，它就会创建一个指定大小的渐变，并返回
CanvasGradient 对象的实例。
创建了渐变对象后，下一步就是使用 addColorStop() 方法来指定色标。这个方法接收两个参数：色标位置和 CSS 颜色值。色标位置是一个 0（开始的颜色）到 1（结束的颜色）之间的数字。
为了让渐变覆盖整个矩形，而不是仅应用到矩形的一部分，矩形和渐变对
象的坐标必须匹配才行。
要创建径向渐变（或放射渐变），可以使用 createRadialGradient() 方法。这个方法接收 6 个参数，对应着两个圆的圆心和半径。前三个参数指定的是起点圆的原心（x 和 y）及半径，后三个参数指定的是终点圆的原心（x 和 y）及半径。
模式其实就是重复的图像，可以用来填充或描边图形。要创建一个新模式，可以调用createPattern() 方法并传入两个参数：一个 HTML img 元素和一个表示如何重复图像的字符串。其中，第二个参数的值与 CSS 的 background-repeat 属性值相同，包括 "repeat" 、 "repeat-x" 、"repeat-y" 和 "no-repeat" 。
createPattern() 方法的第一个参数也可以是一个 video 元素，或者另一个 canvas 元素。
2D 上下文的一个明显的长处就是，可以通过 getImageData() 取得原始图像数据。这个方法接收4 个参数：要取得其数据的画面区域的 x 和 y 坐标以及该区域的像素宽度和高度。
取得左上角坐标为(10,5)、大小为 50×50 像素的区域的图像数据：
返回的对象是 ImageData 的实例。每个 ImageData 对象都有三个属性： width 、 height 和data 。其中 data 属性是一个数组，保存着图像中每一个像素的数据。
在 data 数组中，每一个像素用4 个元素来保存，分别表示红、绿、蓝和透明度值。
数组中每个元素的值都介于 0 到 255 之间（包括 0 和 255）。
还有两个会应用到 2D 上下文中所有绘制操作的属性： globalAlpha 和 globalCompositionOperation 。其中， globalAlpha 是一个介于 0 和 1 之间的值（包括 0和 1），用于指定所有绘制的透明度。默认值为 0。如果所有后续操作都要基于相同的透明度，就可以先把 globalAlpha 设置为适当
值，然后绘制，最后再把它设置回默认值 0。
第二个属性 globalCompositionOperation 表示后绘制的图形怎样与先绘制的图形结合。
WebGL 是针对 Canvas 的 3D 上下文。
WebGL是从 OpenGL ES 2.0 移植到浏览器中的，而 OpenGL ES 2.0 是游戏开发人员在创建计算机图形图像时经常使用的一种语言。WebGL 支持比 2D 上下文更丰富和更强大的图形图像处理能力。
WebGL 涉及的复杂计算需要提前知道数值的精度，而标准的 JavaScript 数值无法满足需要。为此，WebGL 引入了一个概念，叫类型化数组（typed arrays）。类型化数组也是数组，只不过其元素被设置为特定类型的值。
类型化数组的核心就是一个名为 ArrayBuffer 的类型。每个 ArrayBuffer 对象表示的只是内存中指定的字节数，但不会指定这些字节用于保存什么类型的数据。通过 ArrayBuffer 所能做的，就是为了将来使用而分配一定数量的字节。
创建了 ArrayBuffer 对象后，能够通过该对象获得的信息只有它包含的字节数，方法是访问其byteLength 属性：
使用 ArrayBuffer （数组缓冲器类型）的一种特别的方式就是用它来创建数组缓冲器视图。其中，最常见的视图是 DataView ，通过它可以选择 ArrayBuffer 中一小段字节。为此，可以在创建 DataView实例的时候传入一个 ArrayBuffer 、一个可选的字节偏移量（从该字节开始选择）和一个可选的要选择的字节数。
实例化之后， DataView 对象会把字节偏移量以及字节长度信息分别保存在 byteOffset 和byteLength 属性中。
类型化视图一般也被称为类型化数组，因为它们除了元素必须是某种特定的数据类型外，与常规的数组无异。
类型化数组是 WebGL 项目中执行各种操作的重要基础。
目前，主流浏览器的较新版本大都已经支持 canvas 标签。同样地，这些版本的浏览器基本上也都支持 2D 上下文。但对于 WebGL 而言，目前还只有 Firefox 4+和 Chrome 支持它。
html5 Canvas 如何自适应屏幕大小？
用JS调制屏幕大小。
1.CSS 方面：去掉所有元素的外间距、内边距，html 和 body 宽高设为 100%，canvas 元素 display 设为 block。
2.JS 方面：监听窗口的 resize 事件，在窗口大小改变的同时调整 canvas 的大小。
3.完整代码这里我们使用 jQuery 来处理窗口尺寸改变事件响应，以及属性设置。
4.同时使用 $(window).get(0).innerHeight 获取窗口高度，而不是 $(window).height()。是因为后者效果并不完美，无法返回所有浏览器窗口的完整高度值，这样浏览器窗口中 canvas 元素和滚动条的四周可能会仍存在白色区域。
5.代码公式：!DOCTYPE htmlhtmlheadmeta charset="utf-8"title/titlescript src="jquery-3.1.1.js"/scriptstyle* {margin: 0;padding: 0;}html, body {height: 100%;width: 100%;}canvas {display: block;background: #D6F8FF;}/stylescript type="text/javascript"$(function() {//添加窗口尺寸改变响应监听$(window).resize(resizeCanvas);//页面加载后先设置一下canvas大小resizeCanvas();})//canvasfunctionresizeCanvas{$("#myCanvas").attr("width"$(window).get(0).innerWidth);$("#myCanvas").atr("height", $(window).get(0).innerHeight);};/script/headbodycanvas id="myCanvas" width="400" height="200"/body。
/html
canvas 自适应屏幕的问题，能否铺满整个屏幕，并且画布不是等比例放大？
能。具体参考以下方法：
直接设置canvas的style。width:100%;height:100%试试。
canvas width="100" height="100" style="background-color: #ff0000;width:100%;height:100%;"/canvas。
可以用JS监控屏幕大小，然后调整Canvas的大小。在代码中加入JS
$(window).resize(resizeCanvas);
function resizeCanvas()
{canvas.attr("width", $(window).get(0).innerWidth);
canvas.attr("height", $(window).get(0).innerHeight);
context.fillRect(0, 0, canvas.width(), canvas.height());};
resizeCanvas();
就可以了。
canvas 标签只是图形容器，您必须使用脚本来绘制图形。
Canvas 对象表示一个 HTML 画布元素 -canvas。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。
你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过CanvasRenderingContext2D 对象获得。 这是通过 Canvas 对象的getContext() 方法并且把直接量字符串 "2d" 作为唯一的参数传递给它而获得的。
canvas 标记在 Safari 1.3 中引入，在制作此参考页时，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，canvas 标记及其 API 可以使用位于excanvas点sourceforge点net的 ExplorerCanvas 开源项目来模拟。
提示：如果希望学习如何使用 canvas 来绘制图形，可以访问 Mozilla 提供的Canvas 教程（英文）以及相应的中文 Canvas 教程。
