canvas 2.0 图片绘制
绘制图片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 图片绘制的更多相关文章
- 微信小程序canvas把正方形图片绘制成圆形
wxml代码: <view class="result-page"> <canvas canvas-id='firstCanvas' style='width:1 ...
- html5 canvas 笔记三(绘制文本和图片)
绘制文本 fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...
- 把一个base64编码的图片绘制到canvas (canvas的图片在转成dataurl)
把一个base64编码的图片绘制到canvas 需要引入jquery. <canvas id="myCanvas" width="800" height= ...
- HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 用canvas 实现个图片三角化(LOW POLY)效果
之前无意中看到Ovilia 用threejs做了个LOW POLY,也就是图片平面三角化的效果,觉得很惊艳,然后就自己花了点时间尝试了一下. 我是没怎么用过threejs,所以就直接用canvas的2 ...
- CANVAS运用-对图片的压缩上传(仅针对移动浏览器)
最近在移动端设计头像上传功能时,原本是以<input type="file">直接通过formData上传,然而实际使用情况是:对于过大的图片(高像素手机所拍摄的照片等 ...
- canvas生成遮罩图片
首先我们知道css3中增加了不少好用.好玩的css3样式可以使用.今天我们要说到是遮罩. 它的使用方式也不复杂,和background使用方式差不多.使用mask-image就 ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- 用canvas给视频图片添加特效
Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体 ...
随机推荐
- golang结构体、接口、反射
struct结构体 struct用来自定义复杂数据结构,可以包含多个字段属性,可以嵌套; go中的struct类型理解为类,可以定义方法,和函数定义有些许区别; struct类型是值类型. struc ...
- Linux性能监控分析命令(一)—vmstat命令详解
一.vmstat介绍 语法格式: vmstat [-V] [-n] [-S unit] [delay [count]] -V prints version. -n causes the headers ...
- tp5 base64 图片上传
/** * 保存图片 */ public function uploads($value='') { // $file = base64_decode(request()->file('imag ...
- L2-008. 最长对称子串(思维题)*
L2-008. 最长对称子串 参考博客 #include <iostream> using namespace std; int main() { string s; getline(ci ...
- 类Shiro权限校验框架的设计和实现(2)--对复杂权限表达式的支持
前言: 我看了下shiro好像默认不支持复杂表达式的权限校验, 它需要开发者自己去做些功能扩展的工作. 针对这个问题, 同时也会为了弥补上一篇文章提到的支持复杂表示需求, 特地尝试写一下解决方法. 本 ...
- freeswitch黑名单mod_blacklist使用
freeswitch自带黑名单模块"mod_blacklist",此文只是对该模块简单使用的实例. 最近接到客户投诉有大量骚扰电话,而从源头查不太容易,因此想到的笨方法是将投诉人加 ...
- python 4
一.列表相关操作 l = ['布偶猫', '小断腿', '大白'] # . append l.append('哎呀') print(l) # . insert l.insert(, '小猪佩琪') p ...
- XXS level8
(1)查看PHP源代码 <?php ini_set("display_errors", 0); $str = strtolower($_GET["keyword&q ...
- vue 15分钟倒计时
HTML: <span>{{minute}}:{{second}}</span> script: 一 二 // 倒计时 num(n) { return n & ...
- Ubuntu16.04交叉工具链安装
前言: 开发环境是64位的ubuntu16.04,交叉工具链是通过sudo apt-get install ....安装的,移植uboot2014.10,但是很奇怪,按照网上的介绍在start.s里面 ...