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

下面介绍一下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>

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

html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
php 画直线,html5 Canvas实现画直线与设置线条的样式
这篇文章主要介绍了关于html5 Canvas实现画直线与设置线条的样式,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形. ...
html5加js兼容性辅助,解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js，以及excanvas.js解决低版本IE不支持canvas的问题...
插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...
html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等 2)增强型表单表单2 ...
Html5新特性总览
Html5新特性总览 1.HTML5 新元素标签描述 < article> 定义页面独立的内容区域. < aside> 定义页面的侧边栏内容. < bdi> 定 ...
HTML5新特性的学习笔记
HTML5新特性的学习笔记 HTML 超文本标记语言: HyperText Markup Language 这份学习笔记的主要内容是HTML5的新标签基于菜鸟教程的个人向学习笔记菜鸟教程文章目录 ...
HTML5新特性总结 1
文章目录 HTML5 HTML5 浏览器支持 HTML5新元素 HTML5 Canvas 浏览器支持创建一个画布(Canvas) 使用 JavaScript 来绘制图像画线.画圆.写字.渐变效果 ...
HTML中三维特性,前端进阶系列(三):HTML5新特性
HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...
html5 logo svg,HTML5新特性之用SVG绘制微信logo
html5新特新html5 中的一些有趣的新特性:1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的更好的支持 4.新的特殊内容元素,比如 ...
html5储存类型特点,避免踩雷！你不得不知的 HTML5 “新”特性
什么是 HTML5 HTML的发展历程如下: 产生于1990年 1997年 HTML4 出现,成为互联网开发的标准 2008年,HTML5正式出现,2002年趋于稳定 HTML在发展过程中,HTML4 ...

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

canvas裁剪图片

2、canvas标签画多条直线

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

最新文章

热门文章