有关Canvas的一点小事

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