绘制图片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. golang结构体、接口、反射

    struct结构体 struct用来自定义复杂数据结构,可以包含多个字段属性,可以嵌套; go中的struct类型理解为类,可以定义方法,和函数定义有些许区别; struct类型是值类型. struc ...

  2. Linux性能监控分析命令(一)—vmstat命令详解

    一.vmstat介绍 语法格式: vmstat [-V] [-n] [-S unit] [delay [count]] -V prints version. -n causes the headers ...

  3. tp5 base64 图片上传

    /** * 保存图片 */ public function uploads($value='') { // $file = base64_decode(request()->file('imag ...

  4. L2-008. 最长对称子串(思维题)*

    L2-008. 最长对称子串 参考博客 #include <iostream> using namespace std; int main() { string s; getline(ci ...

  5. 类Shiro权限校验框架的设计和实现(2)--对复杂权限表达式的支持

    前言: 我看了下shiro好像默认不支持复杂表达式的权限校验, 它需要开发者自己去做些功能扩展的工作. 针对这个问题, 同时也会为了弥补上一篇文章提到的支持复杂表示需求, 特地尝试写一下解决方法. 本 ...

  6. freeswitch黑名单mod_blacklist使用

    freeswitch自带黑名单模块"mod_blacklist",此文只是对该模块简单使用的实例. 最近接到客户投诉有大量骚扰电话,而从源头查不太容易,因此想到的笨方法是将投诉人加 ...

  7. python 4

    一.列表相关操作 l = ['布偶猫', '小断腿', '大白'] # . append l.append('哎呀') print(l) # . insert l.insert(, '小猪佩琪') p ...

  8. XXS level8

    (1)查看PHP源代码 <?php ini_set("display_errors", 0); $str = strtolower($_GET["keyword&q ...

  9. vue 15分钟倒计时

    HTML: <span>{{minute}}:{{second}}</span> script: 一          二 // 倒计时 num(n) { return n & ...

  10. Ubuntu16.04交叉工具链安装

    前言: 开发环境是64位的ubuntu16.04,交叉工具链是通过sudo apt-get install ....安装的,移植uboot2014.10,但是很奇怪,按照网上的介绍在start.s里面 ...