有关Canvas的一点小事

1、使用canvas绘制图像

什么是图像？在js中它就是一个<img src=””>，<img>有两种接收图像信息的方法，一个是直接链接到图像地址，一个使用base64数据，不过这里讨论的是canvas要使用的Image对象。我们有两个方式定义：

<1>在html中定义好，然后根据id获取

var img=document.getElementById("scream");

<2>新建image对象

var img = new Image();

img.onload = function(){//在这里面进行对图像对象的操作

　　ctx.drawImage(img,0,0);         

};

img.src = 'img/6.png';

得到img对象后，我们有三种方式在canvas上绘制你想要的图像。

<1>只定义开始绘制的坐标，图像的宽和高取决于原图像文件的大小

   ctx.drawImage(img,10,10);//***第一种，三个参数分别是Image,绘制开始的x,y

<2>定义开始的坐标，和绘制的宽和高

ctx.drawImage(img,100,100,width,height);//***第二种，三个参数分别是Image,绘制开始的x,y和拉伸的宽度高度

<3>切割原图片，并绘制到canvas的制定位置

  ctx.drawImage(img,sx,sy,sw,sh,200,80,sw,sh);//***第三种，三个参数分别是Image,切割原图的开始坐标和宽高，绘制开始的x,y和拉伸的宽度高度

附完整的代码：

<!DOCTYPE html>

<html lang="zh-cn">

    <head>

        <meta charset="UTF-8"/>

        <script src='js/jquery-3.3.1.min.js'></script>

        <style>

            body{

                background:black;

                text-align:center;

            }

            #myCanvas{

                background:white;

            }

            #contain{

                width:100%;

                height:600px;

            }

            #scream{

                width:100%;

            }

        </style>

    </head>

    <body>

        <img src="img/7.png" id="scream" hidden>

        <div id="contain">

            <canvas id="myCanvas"></canvas>

        </div>

        <script type="text/javascript">

            $(document).ready(function(){

                var contain = document.getElementById('contain');

                var c=document.getElementById("myCanvas");

                var ctx=c.getContext("2d");

                c.width=contain.offsetWidth;

                c.height=contain.offsetHeight;//***根据容器大小设置宽和高

                /*从dom元素中获取图像*/

                var img=document.getElementById("scream");

                ctx.drawImage(img,10,10);//***第一种，三个参数分别是Image,绘制开始的x,y

                var width = img.width;

                /*新建一个图像元素*/

                var img = new Image();

                img.onload = function(){

                    var sw = img.width;

                    var sh = img.height;

                    var height = width*sh*1.0/sw;

                    ctx.drawImage(img,100,100,width,height);//***第二种，三个参数分别是Image,绘制开始的x,y和拉伸的宽度高度

                    var sx = sw-width;

                    var sy = sh-height;

                    ctx.drawImage(img,sx,sy,sw,sh,200,80,sw,sh);//***第三种，三个参数分别是Image,切割原图的开始坐标和宽高，绘制开始的x,y和拉伸的宽度高度

                    /*后面设置的是原图的宽和高，并不是切割出来的部分的宽和高，需要转换*/

                };

                img.src = 'img/6.png';//*这个图像请比第一个大一点，最好大很多

            });

        </script>

    </body>

</html>

canvas绘制图像

参考：

Js中获取各种宽度高度的问题：

https://www.cnblogs.com/wangkongming/p/6195903.html

巴特西

有关Canvas的一点小事—图像绘制

最新文章

热门文章