HTML5边玩边学图像、图案和字体.docx

一、创建图像对象在 HTML5 中，Image 对象对应着一幅图片，想要获取一个图像对象，有以下几种方法：1)通过 document.images 集合、document.getElementsByTagName 方法或者 document.getElementById 方法来获取网页内已经存在的图片对象；2)用 document.getElementsByTagName 或 document.getElementById 方法来获取另外一个 Canvas 对象，将这个 Canvas 对象作为一个图像对象；3)最常用的方法：创建一个新的空 Image 对象，给他一个图片的超链接，代码如下：/创建一个空图像对象var img = new Image();/给图像对象一个图片超链接img.src = myImage.png; 4) 最后一种是通过 data: url 方式嵌入图像，这种方法很奇妙，他可以用一个很长的字符串来表示一幅图像。那么这个很长的字符串是怎么来的呢？他是把真正的图像文件（bmp jpg 等等）通过 Base64 编码而来，具体的编码程序网上能搜索到很多，我博客里就有一个 Python 版的。用这种方式的好处就是，图片资源始终内嵌在 HTML 网页文件中，缺点是数据量太大，而且图片没办法缓存，导致网页文件打开速度变慢。下面的字符串就是一幅美女图片的 Base64 编码的一小段，让大家看看是什么样子的：/9j/4QDfRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAVAAAASgAAADIBAgAUAAAAXw这些乱七八糟的东西就包含了美女图片的一小部分内容了，后面我们将把它绘制到 Canvas 上。二、绘制图像对象我们得到一个图像对象后，它只是在内存中，我们怎么才能将它绘制到画布上呢？ 上下文对象有一个绘制图像对象的方法：drawImage(image, x, y)简单吧？image 就是你事先准备好的图像对象，x, y 就是图像左上角放置的位置 ，这个方法调用后，你的图像就会出现在 Canvas 上了，下面我们来把上面的美女图像绘制出来，代码如下： 你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器 /美女图的 Base64 编码 IMG_SRC=data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAA./省略40字节 /缩小版本的美女图 IMG_SRC_SMALL=data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAA. /省略40字节 function Show() /获取画布对象 ctx = document.getElementById(canvas1).getContext(2d); /创建图像对象 img=new Image(); /图像被装入后触发 img.onload=function() ctx.drawImage(img,0,0); /指定图像源 img.src=IMG_SRC; function Clear() /清除画布 ctx = document.getElementById(canvas1).getContext(2d); ctx.clearRect(0,0,250,300); 注意：把绘制方法放到图像对象的 onload 事件中，是为了确保图像在完全装入后才绘制三、缩放图像同样的 imageDraw 方法，增加两个参数，就可以对图像实现缩放，如下：drawImage(image, x, y, width, height)width 代表你想将图像绘制成多宽，height 代表你想将图像绘制成多高，设定好后系统会自动按比例进行缩放。下面的例子我们来模仿一个常见的图像软件的小功能，通过拖动滑动条对图像进行缩放，代码如下： 你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器注意：下面的 Range 控件只能在 Google Chrome 浏览器中正确呈现横向缩放input type=range min=1 max=20 onchange=Scale1(event)/& gt;纵向缩放input type=range min=1 max=20 onchange=Scale2(event)/& gt;按比例缩放input type=range min=1 max=20 onchange=Scale3(event)/& gt;平铺 function Scale1() /计算比例 var scale=event.target.value/10 /获取画布对象 ctx = document.getElementById(canvas2).getContext(2d); /清空 ctx.clearRect(0,0,250,300); /创建图像对象 img=new Image(); /图像被装入后触发 img.onload=function() /横向缩放绘制 ctx.drawImage(img,0,0,img.width*scale,img.height); /指定图像源 img.src=IMG_SRC; function Scale2() /计算比例 var scale=event.target.value/10 /获取画布对象 ctx = document.getElementById(canvas2).getContext(2d); /清空 ctx.clearRect(0,0,250,300); /创建图像对象 img=new Image(); /图像被装入后触发 img.onload=function() /纵向缩放绘制 ctx.drawImage(img,0,0,img.width,img.height*scale); /指定图像源 img.src=IMG_SRC; function Scale3() /计算比例 var scale=event.target.value/10 /获取画布对象 ctx = document.getElementById(canvas2).getContext(2d); /清空 ctx.clearRect(0,0,250,300); /创建图像对象 img=new Image(); /图像被装入后触发 img.onload=function() /按比例缩放绘制 ctx.drawImage(img,0,0,img.width*scale,img.height*scale); /指定图像源 img.src=IMG_SRC; function Scale4() /平铺比例 var scale=event.target.value; /获取画布对象 ctx = document.getElementById(canvas2).getContext(2d); /清空 ctx.clearRect(0,0,250,300); /创建图像对象 img=new Image(); /图像被装入后触发 img.onload=function() /平铺个数 var n1=img.width/scale; var n2=img.height/scale; for(var i=0;in1;i+) for(var j=0;jn2;j+) ctx.drawImage(img,i*img.width/scale,j*img.height/scale,img.width/scale,img.height/scale); /指定图像源 img.src=IMG_SRC; 注意：下面的 Range 控件只能在 Google Chrome 浏览器中正确呈现。四、裁剪图像图像裁剪同样是使用 imageDraw 方法，原型如下：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)，其中sx, sy 是图像上的一个坐标位置，这个坐标是裁剪的起始点，sWidth, sHeight 是裁剪的宽度和长度，有了这四个参数，我们就可以将图像上的任意区域裁剪出来了。另外，dx, dy 是画布上的一个坐标为止，裁剪出来的图像的左上角将放置在这个位置，dWidth, dHeight 是设置裁剪出来的图像绘制成多长和多宽，可以缩放，裁剪图像比较简单，就不给例子了：五、图案在上面的图像缩放中，我们用循环的方法实现了图像的平铺，其实还有更方便的方法，就是用图案对象填充画布，图案对象用下面的方法创建：createPattern(image,type)。其中，Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。得到图案对象后，可以将其设置给上下文对象的 fillStyle 属性，然后再填充画布，就可以看到重复填充的效果了。下面的代码中，我们将把缩小版本的美女图用 repeat 模式，平铺到画布上： 你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器 /美女图的缩小版本 IMG_SRC_SMALL=data:image/gif;base64,/9j /4QDfRXhpZgAASUkqAAgAAAAFABIBA.;/省略四个字节 function Patterns() /获取画布对象 ctx = document.getElementById(canvas3).getContext(2d); /创建图像对象 img=new Image(); /指定图像源 img.src=IMG_SRC_SMALL; /图像被装入后触发 img.onload=function() /创建图案 var ptrn = ctx.createPattern(img,repeat); /将图案设置为填充样式 ctx.fillStyle = ptrn; /填充画布 ctx.fillRect(0,0,250,300); function ClearPatterns() /获取画布对象 ctx = document.getElementById(canvas3).getContext(2d); /清空 ctx.clearRect(0,0,250,300); 六、字体HTML5 的没有专门的字体对象，上下文对象中有三个属性用来设置字体，两个方法来绘制字符串，他们是：font：文字字体，同 CSS font-family 属性。textAlign：文字水平对齐方式。可取属性值: start, end, left, right, center。默认值: start。textBaseline：文字竖直对齐方式。可取属性值：top, hanging, middle, alphabetic, ideographic, bottom。默认值：alphabetic。fillText 和 strokeText：用填充方式和轮廓方式绘制字符串。下面的代码绘制两个不同设置的