有关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

 

 

posted @ 2019-01-14 15:28  l.w.x  阅读(276)  评论(0)  编辑  收藏  举报