一、创建图像对象
在 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"
>
你的浏览器不支持
<
canvas
>
标签，请使用 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"
>
你的浏览器不支持
<
canvas
>
标签，请使用 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"
>
你的浏览器不支持
<
canvas
>
标签，请使用 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.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。
2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
5.本站是非经营性个人站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途
暂无评论内容