当前位置:Gxlcms > html代码 > HTML5边玩边学(五)-图像、图案和字体

HTML5边玩边学(五)-图像、图案和字体

时间:2021-07-01 10:21:17 帮助过:32人阅读

一、创建图像对象

在 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">

    你的浏览器不支持 &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 代表你想将图像绘制成多高,设定好后系统会自动按比例进行缩放。

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

代码



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

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

    你的浏览器不支持 &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.

fillTextstrokeText:用填充方式和轮廓方式绘制字符串

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

代码



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

-->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);

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

1319.jpg

以上就是HTML5边玩边学(五)-图像、图案和字体的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行