canvas 绘制图片

前面我们了解了canvas的一些基本使用方法，在canvas中我们还可以在canvas中直接绘制图片，在canvas中绘制图片主要使用到drawImage方法

一：drawImage方法参数有三中情况

1：三个参数

ctx.drawImage(image,dx,dy)

image：需要绘制的img图片

dx,dy：绘制的img图片在canvas中的坐标(x,y)

2：五个参数

ctx.drawImage(image,dx,dy,dw,dh)

image：需要绘制的img图片

dx,dy：绘制的img图片在canvas中的坐标(x,y)

dw,dh：绘制的img图片在canvas中的大小(w,h)宽高

3：9个参数(用于切片)，通俗的说就是将图片进行特定裁剪然后放到指定的位置

ctx.drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh)

image：需要绘制的img图片

sx, sy, sw, sh：定义图像源的切片位置和大小

dx, dy, dw, dh：定义切片的目标显示位置和大小

二：在canvas中绘制图片分两种情况

1：有现成的img图片，将img标签中的图片绘制到canvas中

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//创建图片
var img = document.querySelector("img");
//绘制图片
ctx.drawImage(img, 0, 0)

2：从零开始创建图片

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//创建图片
var img = new Image();   // 创建一个<img>元素
img.onload = function(){ctx.drawImage(img, 0, 0)//绘制图片
}
img.src = 'wj.jpg'; // 设置图片源地址

三：根据上面drawImage参数的三种情况，我们来分别实现，看看效果

1：ctx.drawImage(image,dx,dy)：将原始图片绘制到canvas中

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//创建图片
var img = new Image();   // 创建一个<img>元素
img.onload = function(){ctx.drawImage(img, 0, 0)//绘制图片
}
img.src = 'wj.jpg'; // 设置图片源地址

2：ctx.drawImage(image,dx,dy,dw,dh)：给图片设置大小绘制到canvas中

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//创建图片
var img = new Image();   // 创建一个<img>元素
img.onload = function(){ctx.drawImage(img, 0, 0, 50, 50)//绘制图片
}
img.src = 'wj.jpg'; // 设置图片源地址

3:ctx.drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh)：切片，将图片进行特定裁剪然后放到指定的位置

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//创建图片
var img = new Image();   // 创建一个<img>元素
img.onload = function(){ctx.drawImage(img, 0, 0, 200, 200, 10, 10, 200, 250)
}
img.src = 'wj.jpg'; // 设置图片源地址

canvas 绘制图片相关推荐

glide加载图片闪烁_html5 canvas绘制图片
举两个新手(我)比较容易范的错误 1.图片声明了,绘制方法也ok了,但是有的时候就可以显示出来,有的时候就显示不出来 function draw(){var c=document.getElement ...
微信小程序canvas绘制图片真机不显示问题
用canvas绘制图片的时候,模拟器上正常显示,真机上不显示 const ctx = wx.createCanvasContext('canvasImg'); var imgUrl = 'https: ...
小程序 canvas 绘制图片
canvas绘制图片绘制图片的问题 html 绘制图片的问题 1.canvas不能绘制网络图片需要转换成本地图片进行使用 2.多张图片绘制需要调用 img.onload,进行嵌套绘制 html &l ...
canvas - 绘制图片，图片变模糊问题解决）
问题:canvas绘制图片,图片变模糊设定一个一定尺寸的canvas,我这里设置的画布大小是400px*400px.当一张图片完全画到画布上的时候,大概率都会出现图片模糊的情况. 我拿下面一张图片画 ...
canvas绘制图片
canvas绘制图片方法 canvas支持image,svg,video,canvas的绘制drawImage(image, x, y) 在坐标x,y处绘制图片 drawImage(image, x ...
Canvas - 绘制图片模糊问题（canvas 生成图片模糊）
Canvas绘制模糊文章目录 Canvas绘制模糊零.问题背景与解决思路一.涉及到的Api 1.关于window.devicePixelRatio canvas出现模糊的原因第一块屏幕测试 w ...
canvas绘制图片，图片变模糊
canvas绘制图片,图片变模糊问题: 设定一个一定尺寸的canvas,我这里设置的画布大小是400px*400px.当一张图片完全画到画布上的时候,大概率都会出现图片模糊的情况. 我拿下面一张图片 ...
android之Canvas绘制图片
参考 https://blog.csdn.net/u013135085/article/details/81216663 需求:给与一张图片,可以设置大小,绘制出图片步骤一:加载位图 normalF ...
微信小程序新版canvas绘制图片方法
截至2022.12.23 修改日微信小程序开发文档介绍不全,导致很多用户绘制图片不显示或失败,因此写下截至目前的可行方案 <canvas type="2d" id=&quo ...
微信小程序新版canvas绘制图片方法
今天在做项目使用到了canvas绘制二维码,发现以前的方法被弃用了. wxml: <canvas type="2d" id="myCanvas" styl ...

canvas 绘制图片

canvas 绘制图片相关推荐

最新文章

热门文章