简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > H5教程 > 主體

HTML5邊玩邊學（五）-圖片、圖案和字體

黄舟
發布： 2017-03-29 15:02:06
原創
1461 人瀏覽過

一、创建图像对象

在 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 上了

下面我们来把上面的美女图像绘制出来，代码如下：

代码



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><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=&#39;data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAA......&#39;//省略40字节

    //缩小版本的美女图

    IMG_SRC_SMALL=&#39;data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAA......&#39;//省略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 代表你想将图像绘制成多高，设定好后系统会自动按比例进行缩放。

下面的例子我们来模仿一个常见的图像软件的小功能，通过拖动滑动条对图像进行缩放，代码如下：

代码



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><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)"/><br/>

纵向缩放<input type="range" min="1" max="20" onchange="Scale2(event)"/><br/>

按比例缩放<input type="range" min="1" max="20" onchange="Scale3(event)"/><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>
登入後複製

横向缩放
纵向缩放
按比例缩放
平铺

提示：

只有在 Google Chrome 浏览器中，Range 控件才能呈现出滑动条的的样子并正确工作；

在其他浏览器中，您可能只能看到四个文本框，并且无法正常工作

四、裁剪图像

图像裁剪同样是使用 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 模式，平铺到画布上：

图案



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><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=&#39;data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAAFABIBA......&#39;;//省略四个字节



    function Patterns(){

        ///获取画布对象

        ctx = document.getElementById("canvas3").getContext("2d");

        //创建图像对象

        img=new Image();

        //指定图像源

        img.src=IMG_SRC_SMALL;

        //图像被装入后触发

        img.onload=function(){

            //创建图案

            var ptrn = ctx.createPattern(img,&#39;repeat&#39;); 

                        //将图案设置为填充样式

            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 字符串

代码



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->context.fillStyle    = &#39;#00f&#39;;

context.font         = &#39;italic 30px sans-serif&#39;;

context.textBaseline = &#39;top&#39;;
//填充字符串

context.fillText  (&#39;Hello world!&#39;, 0, 0);

context.font         = &#39;bold 30px sans-serif&#39;;
//轮廓字符串

context.strokeText(&#39;Hello world!&#39;, 0, 50);
登入後複製

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

HTML5邊玩邊學（五）-圖片、圖案和字體

以上是HTML5邊玩邊學（五）-圖片、圖案和字體的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
HTML5，图像、图案
來源：php.cn
上一篇：HTML5邊玩邊學（四）-變幻的色彩 下一篇：HTML5邊玩邊學（六）-汽車人，變形的詳細介紹
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
動態修改Javafx中的內嵌CSS樣式 我試圖在應用程式最大化時更改窗格的背景圖像。我的背景是使用內嵌css設定的。我為樣式設定了兩個不同的變數和一個if語句。但是，我沒有運氣讓它改變樣式。 StringcssStyle...
來自於 2024-04-06 20:57:16
0
1
487
使用網格建立此特定設計：逐步指南 我正在嘗試創建一個類似於此圖像的佈局，我嘗試過使用此網格但無法實​​現。 <ulclass="container"><liclass=&quo...
來自於 2024-04-06 20:29:08
0
2
492
僅 CSS 方法可在單擊時動態修改圖片 src，無需使用 JavaScript 我需要僅使用css更改滑鼠單擊時圖像的src喜歡img:active{}
來自於 2024-04-06 19:25:49
0
1
505
狀態更新在 Android 上的 React-Native 中不起作用 我有一些程式碼，其中有成對的圖像，它們都在可滑動的水平圖庫中。現在，當您單擊兩個圖像的上部時，圖像應該關閉切換，所以我所做的是，我將isImage2Active設為狀態，然後只需切...
來自於 2024-04-06 16:54:10
0
1
410
for循環隨機從1到0 基本上，每次刷新頁面時，for循環都有可能從1變成0。我不知道為什麼會發生這種情況，但它影響了我的圖像彼此分層的方式。我嘗試使用foreach循環，但它仍然給了我相同的結果。這是f...
來自於 2024-04-06 16:48:14
0
1
393
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！