您的位置:知识库 » Web前端

HTML5边玩边学(5):图像、图案和字体

作者: 左洸  来源: 博客园  发布时间: 2010-10-09 18:00  阅读: 2272 次  推荐: 1   原文链接   [收藏]  
  一、创建图像对象

  在 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 id="canvas1" width="250" height="300" style="background-color:black">
你的浏览器不支持
&lt;canvas&gt;标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
<input type="button" value="显示美女" onclick="Show();" />
<input type="button" value="清空" onclick="Clear();" />

<script type="text/javascript">
//美女图的 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);
}
</script>

注意:把绘制方法放到图像对象的 onload 事件中,是为了确保图像在完全装入后才绘制

  三、缩放图像

  同样的 imageDraw 方法,增加两个参数,就可以对图像实现缩放,如下:drawImage(image, x, y, width, height)

  width 代表你想将图像绘制成多宽,height 代表你想将图像绘制成多高,设定好后系统会自动按比例进行缩放。下面的例子我们来模仿一个常见的图像软件的小功能,通过拖动滑动条对图像进行缩放,代码如下:

<canvas id="canvas2" width="250" height="300" style="background-color:black">
你的浏览器不支持
&lt;canvas&gt;标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
注意:下面的 Range 控件只能在 Google Chrome 浏览器中正确呈现
横向缩放
<input type="range" min="1" max="20" onchange="Scale1(event)"/& gt;<br/>
纵向缩放
<input type="range" min="1" max="20" onchange="Scale2(event)"/& gt;<br/>
按比例缩放
<input type="range" min="1" max="20" onchange="Scale3(event)"/& gt;<br/>
平铺
<input type="range" min="1" max="10" value="1" onchange="Scale4(event)"/><br/>

<script type="text/javascript">
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;i<n1;i++)
for(var j=0;j<n2;j++)
ctx.drawImage(img,i
*img.width/scale,j*img.height/scale,img.width/scale,img.height/scale);
}
//指定图像源
img.src=IMG_SRC;
}
</script>

  注意:下面的 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 id="canvas3" width="250" height="300" style="background-color:black">
你的浏览器不支持
&lt;canvas&gt;标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
<input type="button" value="贴图" onclick="Patterns();" />
<input type="button" value="清空" onclick="ClearPatterns();" />

<script type="text/javascript">
//美女图的缩小版本
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);
}
</script>

  六、字体

  HTML5 的没有专门的字体对象,上下文对象中有三个属性用来设置字体,两个方法来绘制字符串,他们是:

  font:文字字体,同 CSS font-family 属性。
  textAlign:文字水平对齐方式。可取属性值: start, end, left, right, center。默认值: start。
  textBaseline:文字竖直对齐方式。可取属性值:top, hanging, middle, alphabetic, ideographic, bottom。默认值:alphabetic。

  fillText 和 strokeText:用填充方式和轮廓方式绘制字符串。  

  下面的代码绘制两个不同设置的 Hello World 字符串:

context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
//填充字符串
context.fillText ('Hello world!', 0, 0);
context.font = 'bold 30px sans-serif';
//轮廓字符串
context.strokeText('Hello world!', 0, 50);

  下图是上面的代码运行效果:

1
0
标签:HTML5

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻