绘制图片drawImage

本文属于《html5 Canvas画图系列教程

这里的绘制图片是指把一张现成的图片,绘制到Canvas上面。

有的人可能就有疑问了,既然是现成的图片,那干嘛用canvas来绘制,直接用img标签展现出来不就行了?

canvas上绘制图片,不是用来展示的,canvas功能更强大,比如,把图片画到canvas上,可以像PS中的滤镜一样,对图片进行修改,而且最后还能保存为新图片。

这些操作很复杂,我们先来看最基本的:如何把图片绘制到canvas上?

canvas中有个现成的绘制图片的方法即drawImage,他的语法如下:

drawImage(image, x, y)

drawImage(image, x, y, width, height)

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

你没有看错,drawImage就是有三种语法,越来越复杂。我们要由浅入深的学习:

1,drawImage(image, x, y)

这是最简单的使用方式。绘制图片嘛,当然要有一张“图”,image参数就是图——这个图可以是一张图片,也可以是另外一个canvas元素,记住!!

然后x,y就是canvas上的坐标,表示你要把图片画在哪个位置,这个不用多说。

这种使用方法,绘制的图片是原始大小

2,drawImage(image, x0,0, y, width, height)

如果只能把图片按原始大小绘制,那也太逊了。我们有时候需要对图片进行缩放,第2种用法中的width及height参数,即你决定把图片绘制的高度和宽度。

这个高度与宽度和原始图片无关,canvas会强制把图片按这个宽高绘制,如果图片太小,就会放大;大了则会缩小;比例不对则会变形。跟img的width和height差不多

3,drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

第3种用法看起来很吓人,因为参数太多了,而且参数都是类似的。

大家注意到有一组参数以s开头,而另一组则以d开头,这是什么意思?

s其实是slice的意思,即切割;d你可以理解为draw。

切割的意思是,有时候我们不需要画出整个图片——可能一张图片上只有某个区域是我们想要的,这时候我们可以把想要的那一块切出来,在绘制到canvas上。

所以,(sx,sy)是原图片上开始切割的坐标,而(sWidth,sHeight)则是你要切割多宽多高;后面的dx,dy,dWidth,dHeight则与用法2相同。如:

这表示在原图jpg的10,10的位置开始切割下来一个200*200大小的块,然后把这块儿绘制到canvas上40,40的坐标处,并且大小依旧是200*200。

另外,s和d系列的参数,谁应该在前面呢?怎么才能记住他们的顺序?

先切再画,比先画再切更省事。画了再切,不就成了先画出多余的,又把多余的给切掉,这不是蛋疼吗?

建议大家自行测试一下dramImage的用法,可以加深印象。

大家测试的时候一定要记住:图片需要加载完成才能绘制出来。如果你是用JS载入图片,那你需要把绘制函数加在图片的onload事件上,才能确保绘制成功。

drawImage注意事项:

如果在原图上切割的范围,超出了图片本身的范围,会发生什么?会不会把已有在图片部分八绘制出来?

答:不会报错,但图片完全不会绘制出来,只会绘制一片空白。

最后,drawImage这三种方式,各自的参数个数是不能省略的。比如,我们在第3个使用方式中,打算切割把切割下来的200*200的图片依然按200*200绘制出来,那么我们可不可以不填最后那两个参数呢?是不是就默认200*200了?

答案是否定的,这样做只会报错。

canvas 2.0 图片绘制的更多相关文章

  1. 微信小程序canvas把正方形图片绘制成圆形

    wxml代码: <view class="result-page"> <canvas canvas-id='firstCanvas' style='width:1 ...

  2. html5 canvas 笔记三(绘制文本和图片)

    绘制文本 fillText(text, x, y [, maxWidth])   在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...

  3. 把一个base64编码的图片绘制到canvas (canvas的图片在转成dataurl)

    把一个base64编码的图片绘制到canvas 需要引入jquery. <canvas id="myCanvas" width="800" height= ...

  4. HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 用canvas 实现个图片三角化(LOW POLY)效果

    之前无意中看到Ovilia 用threejs做了个LOW POLY,也就是图片平面三角化的效果,觉得很惊艳,然后就自己花了点时间尝试了一下. 我是没怎么用过threejs,所以就直接用canvas的2 ...

  6. CANVAS运用-对图片的压缩上传(仅针对移动浏览器)

    最近在移动端设计头像上传功能时,原本是以<input type="file">直接通过formData上传,然而实际使用情况是:对于过大的图片(高像素手机所拍摄的照片等 ...

  7. canvas生成遮罩图片

         首先我们知道css3中增加了不少好用.好玩的css3样式可以使用.今天我们要说到是遮罩.        它的使用方式也不复杂,和background使用方式差不多.使用mask-image就 ...

  8. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  9. 用canvas给视频图片添加特效

    Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体 ...

随机推荐

  1. RockeMq源码之Client

    Client中既有producer,也有consumer,先看前者 org.apache.rocketmq.client.producer.DefaultMQProducer.class 一般都是调用 ...

  2. shell中获取时间

    获得当天的日期 date +%Y-%m-%d 输出: 2011-07-28 将当前日期赋值给DATE变量DATE=$(date +%Y%m%d) 有时候我们需要使用今天之前或者往后的日期,这时可以使用 ...

  3. Linux分区知识及企业场景分区76

    文件系统就相当于装修一样.这个硬盘拿过来了,分完区了,没有格式化. 没有格式化就相当于没有装修.[分区]不是必须的. 如果没有文件系统就不能放数据,文件系统可以理解为一个软件, 它的实现形式是软件,这 ...

  4. HttpURLConnection与HttpClient浅析

    转自:https://blog.csdn.net/u012838207/article/details/82867701 HttpURLConnection与HttpClient浅析 1. GET请求 ...

  5. linux rpm方式安装mysql

    01.搜索 mysql linux 网盘地址    http://pan.baidu.com/s/1qYOC6cs 02.把下载好的mysql 使用 xftp传到 linux中 software 文件 ...

  6. Idea Tomcat Servlet路径配置问题

    虚拟路径问题没有搞清楚,折腾了好久. 总的来说:login.html(action)和loginServlet(@webServlet)的虚拟路径相差一个/day14.同时二者在浏览器的访问时,都必须 ...

  7. 重启HA集群NameNode无缘无故挂掉

    重启HA集群后,两个NameNode无缘无故挂掉,查看日志时显示错误如下: 原因:journalnode的端口是8485,默认情况下是先NameNode启动后再启动journalnode,如果在Nam ...

  8. Linux下pn532板子测试学校水卡

    0x01买板子 最便宜的板子pn532,需要买usb转串口的设备,对于kali-rolling,好像是通杀的,无论是PL2303,ch34X,FT232RL(没测试,这个更高端应该没问题),cp210 ...

  9. 安装httpd服务

    1.yum安装httpd服务 2.启动httpd服务端口被占用 3.修改端口 4.启动httpd服务 5.输入网址是否正常能访问

  10. day01-计算机原理与操作系统