|
|
请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
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 |
赞一个! |
查看全部评分
|
发表于 2022-3-3 15:06
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
