【微信_小游戏_canvas_基础_笔记8】

微信_小游戏_canvas_基础_笔记8

绘制图片

到现在为止,给我的感觉,所有复杂的东西其实都是简单的基础知识搭积木一样一点一点的弄上去的,所以基础很总要.

感谢看到现在的朋友,点个赞再走.

前期准备

let ctx = canvas.getContext("2d");
let cw = ctx.canvas.width; // canvas 宽
let ch = ctx.canvas.height; // canvas 高
console.log("main_ctx",cw,ch,ctx);

绘制单条鱼

花了整整一个下午时间,看了N多资料,研究出这3行代码(哭)
本人没有HTML经验,网上有很多复杂的代码
感觉写的不错的其中之一

https://www.twle.cn/l/yufei/canvas/canvas-basic-image-drawimage.html

晚上不知道为什么又罢工,又查询了N多资料后,有个信任问题,(ctrl + 单击)会弹出对话框,其中有个信任选项

let img = new Image();
img.src = "https://img-blog.csdn.net/20171230163702723?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzI1MTQwNDM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast";
let iw = img.width; // 图片宽度
let ih = img.height; // 图片高度
let iw1 = iw/8 //一条鱼的宽度
console.log("图片信息",iw,ih,img,)

这里要重点了解下canvas.drawimage这个函数
网上查询出来可以传参数的个数不一致,ctx打印出来的也只有3个参数
实践是检验真理的唯一标准,经过验证
ctx.drawImage(参数a, 参数b1, 参数b2, 参数b3, 参数b4, 参数c1, 参数c2, 参数c3, 参数c4,);
参数a : 需要网络图片(无法直接传入本地地址参数,这也是我花了很长时间研究的问题)
参数b1 : 对象图片(网络图片)截取的起始x坐标
参数b2 : 对象图片(网络图片)截取的起始y坐标
参数b3 : 对象图片(网络图片)截取的宽度
参数b4 : 对象图片(网络图片)截取的高度
参数c1 : 图片呈现在canvas中的起始x坐标
参数c2 : 图片呈现在canvas中的起始y坐标
参数c3 : 图片呈现在canvas中的宽度
参数c4 : 图片呈现在canvas中的高度

// 先修改背景颜色,不然看不到图片的黑色阴影
ctx.fillStyle = "white";
ctx.fillRect(0,0