Html5新特性 canvas画板画直线和等比缩放居中裁剪图片

来源：互联网发布：directx11游戏编程编辑：程序博客网时间：2024/04/30 09:40

下面介绍一下canvas的几种使用方法，画直线和裁剪图片；

canvas裁剪图片

h5的这个新特性，我们可以使用canvas进行图片的处理，比如裁剪，等比放大或缩小。比如我们有个360x607宽高的目标图，如果上传图片的宽高都大于目标图，我们对目标图等比压缩，然后在剧中裁剪；如果又一边小于，我们就对上传图片等比放大，让其都满足目标大小，再居中裁剪。

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。

所以canvas既可以操作canvas，image，video。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>canvas裁剪图片</title><script type="text/javascript" src="jquery-2.1.0.min.js"></script></head><body ><div><img id="orgimg" src="352x220.jpg" alt="" /><img id="objimg" src="352x220.jpg" alt="" style="border: 1px solid blue;"/><!-- 添加canvas标签，并加上红色边框以便于在页面上查看 --><canvas id="myCanvas" style="border: 1px solid red;"></canvas></div><script type="text/javascript">var img = document.getElementById("orgimg");var mwidth = 360;//目标宽度var mhigth = 607;//目标高度var img_width = img.width; //原图片宽var img_height = img.height; //原图片高var r = 0; //压缩比var wtemp = img_width, htemp = img_height;//放大或缩小之后暂存图var objimg = document.getElementById("objimg"); //暂存图drawImage();function drawImage(){//获取Canvas对象(画布)var canvas = document.getElementById("myCanvas");//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误if(canvas.getContext){      //获取对应的CanvasRenderingContext2D对象(画笔)if(img_width == mwidth && img_height == mhigth){}else if(img_width > mwidth && img_height > mhigth){//宽高都大于目标图，需要等比压缩r = img_width / mwidth;if((img_height / r) < mhigth){r = img_height / mhigth;}wtemp = Math.ceil(img_width / r);htemp = Math.ceil(img_height / r);resizeImage(wtemp, htemp);}else{ //只要一边小于，就需要等比放大if(img_width < mwidth && img_height < mhigth){//宽高都小于r = mwidth / img_width;if((img_height * r) < mhigth){r = mhigth / img_height;}}else{if(img_width < mwidth){ //宽小于r = mwidth / img_width;}else{ //高小于r = mhigth / img_height;}}wtemp = Math.ceil(img_width * r);htemp = Math.ceil(img_height * r);resizeImage(wtemp, htemp);}canvas.width = mwidth;canvas.height = mhigth;canvas.getContext('2d').drawImage(objimg, (objimg.width - mwidth)/2, (objimg.height - mhigth)/2, mwidth, mhigth, 0, 0, mwidth, mhigth);  }}    function resizeImage(w, h){ //重置大小    var canvas1 = document.getElementById("myCanvas");canvas1.width = w;canvas1.height = h;canvas1.getContext('2d').drawImage(objimg, 0, 0, canvas1.width, canvas1.height);       $("#objimg").attr('src', canvas1.toDataURL("image/jpg"));  }</script></body></html>

效果如下图：

2、canvas标签画多条直线

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>canvas画直线</title><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><body ><!-- 添加canvas标签，并加上红色边框以便于在页面上查看 --><canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">您的浏览器不支持canvas标签。</canvas><script type="text/javascript">//获取Canvas对象(画布)var canvas = document.getElementById("myCanvas");//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误if(canvas.getContext){      //获取对应的CanvasRenderingContext2D对象(画笔)    var ctx = canvas.getContext("2d");//线条的颜色ctx.strokeStyle="#FF9933";//线条的宽度像素ctx.lineWidth=10;//线条的两关形状ctx.lineCap="round";    //注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。       //开始一个新的绘制路径    ctx.beginPath();    //定义直线的起点坐标为(10,10)    ctx.moveTo(50, 50);    //定义直线的终点坐标为(50,10)    ctx.lineTo(350, 250);ctx.moveTo(50, 240);ctx.lineTo(360, 60);ctx.moveTo(50, 200);ctx.lineTo(300, 40);    //沿着坐标点顺序的路径绘制直线    ctx.stroke();    //关闭当前的绘制路径    ctx.closePath();}</script></body></html>

2 1