|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2022-3-3 15:44 编辑
现成的图片可以绘制到canvas画布里来,这需要用到drawImage()方法。此方法最简单的语法如下:
context.drawImage(image,dx,dy);
image参数是目标图片,可以是本地文件(本地测试的话),也可以是有效的网络文件;dx指画布canvas上的x坐标,dy值y坐标。这三个参数是 drawImage() 方法必选参数。
可以在画布上设定图片呈现的宽度和高度,这时,需要加入dw和dh两个可选参数:
context.drawImage(image,dx,dy,dw,dh);
现在是五个参数了,其中新增的dw和dh分别指图片在canvas画布上呈现的宽度与高度。dw和dh不要的话,则按原始图片的尺寸呈现,但受制于画布的尺寸——画布若小于图片,图片将只呈现画布大小的尺寸,超出画布的部分会被裁减掉。
还可以指定原始图片从哪开始剪裁、剪裁的宽度与高度尺寸是多少,这时,参数就凑够九个了,够吓人的:
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
新增的四个可选参数都以s开头,s是src的缩写,sx和sy指从原始图片的xy坐标值处开始裁剪,sw和sh表示相对于sx和sy裁剪到横向和纵向的多少尺寸。这四个值省略的话,从(0,0)开始裁剪,裁剪到全部的宽高尺寸。
这里需要提醒一下:所有参数仅支持纯数字,单位只能为像素但不要写出来,百分比的表示法是不受支持的,canvas相关属性和方法的参数都如此。
有意思的是,drawImage方法支持对视频图像的抓取,以后条件成熟了再介绍。
下面给一个实例让大家领略一下把图片简单“搬到”画布的方法:
<canvas id="cPic" width="300" height="300">亲的浏览器好老</canvas>
<script>
var cc = document.getElementById('cPic'); //画布操作标识
var ct = cc.getContext('2d'); //创建2d画笔并授权给 ct 变量
var pic = new Image(); //定义新图像:JS通用方法,非canvas方法
pic.src = "/data/attachment/forum/202202/14/122702ng48mingmvnwqlem.jpg"; //指定图像路径
//图片加载事件发生时:用drawImage方法画到canvas中
pic.onload = function(){
ct.drawImage(pic,0,0,300,300);
/*这里仅使用 image、dx、dy三个必需的参数,还有两个可选参数dw和dh,
忽视原始图片的坐标和尺寸,原始图片将被缩放,可能会变形*/
//ct.drawImage(pic,10,10,600,600,0,0,300,300); // 这个裁剪也不错
}
</script>
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|