canvas-绘制图片
2024-05-20 04:29:44
绘制图片
创建图片对象
方法一
<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');setTimeout(() => {ctx.clearRect(0, 0, canvas.width, canvas.height)}, 10000);let img = document.createElement('img');img.src = 'https://img01.jituwang.com/201113/165270-20111312202573.jpg';}}
</script>
方法二
<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');setTimeout(() => {ctx.clearRect(0, 0, canvas.width, canvas.height)}, 10000);let image = new Image();image.src = 'https://img01.jituwang.com/201113/165270-20111312202573.jpg';}}
</script>
绘制图片的三种方式
方式一
<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');setTimeout(() => {ctx.clearRect(0, 0, canvas.width, canvas.height)}, 10000);let image = new Image();image.onload = function () {// 图片加载完毕；实现图片绘制// 方式一:图片对象 绘制在画布上的坐标x,yctx.drawImage(image, 100, 100);}image.src = 'https://img01.jituwang.com/201113/165270-20111312202573.jpg';}}
</script>
方式二
<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');setTimeout(() => {ctx.clearRect(0, 0, canvas.width, canvas.height)}, 10000);let image = new Image();image.onload = function () {// 图片加载完毕；实现图片绘制// 方式二:图片对象 绘制在画布上的坐标x,y 图片大小ctx.drawImage(image, 100, 100, 100, 100);}image.src = 'https://img01.jituwang.com/201113/165270-20111312202573.jpg';}}
</script>
方式三
<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');setTimeout(() => {ctx.clearRect(0, 0, canvas.width, canvas.height)}, 10000);let image = new Image();image.onload = function () {// 图片加载完毕；实现图片绘制// 方式三 // 图片对象 // 图片上的定位坐标x,y（从哪里开始截取） // 图片上截取多大的区域w,h // 绘制在画布上的坐标x,y // 图片的大小不是裁剪而是缩放（一般来说会和图片上截取多大的区域w,h一致）ctx.drawImage(image,200, 200,200, 100,200, 200,200, 100);}image.src = 'https://img01.jituwang.com/201113/165270-20111312202573.jpg';}}
</script>
帧动画
<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');// setTimeout(() => {// ctx.clearRect(0, 0, canvas.width, canvas.height)// }, 10000);let image = new Image();image.onload = function () {// 图片加载完毕；实现图片绘制// 方式三 图片对象 图片上的定位坐标x,y（从哪里开始截取） 图片上截取多大的区域w,h 绘制在画布上的坐标x,y 图片的大小不是裁剪而是缩放// ctx.drawImage(image,// 200, 200,// 200, 100,// 200, 200,// 200, 100);// }let showImgWidth = image.width / 2;let showImgHeight = image.height / 2;let index = 0;ctx.beginPath();ctx.drawImage(image,0, 0,showImgWidth, showImgHeight,canvas.width / 2 - showImgWidth / 2, canvas.height / 2 - showImgHeight / 2,showImgWidth, showImgHeight);setInterval(() => {index++;if (index == 4) {index = 0;};console.log(index);ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.beginPath();if (index <= 1) {ctx.drawImage(image,index * showImgWidth, 0,showImgWidth, showImgHeight,canvas.width / 2 - showImgWidth / 2, canvas.height / 2 - showImgHeight / 2,showImgWidth, showImgHeight);} else {ctx.drawImage(image,(index - 2) * showImgWidth, showImgHeight,showImgWidth, showImgHeight,canvas.width / 2 - showImgWidth / 2, canvas.height / 2 - showImgHeight / 2,showImgWidth, showImgHeight);}}, 1000);}image.src = 'https://uploads.xuexila.com/allimg/1701/907-1F112151431-52.jpg';}}
</script>
行走的小人
<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');// setTimeout(() => {// ctx.clearRect(0, 0, canvas.width, canvas.height)// }, 10000);class Person {constructor(selector) {this.ctx = document.querySelector(selector).getContext('2d');this.x0 = this.ctx.canvas.width / 2;this.y0 = this.ctx.canvas.height / 2;this.index = 0;this.timer = null;}init(imgUrl) {let image = new Image();let that = this;image.onload = function () {let imgWidth = image.width / 4;let imgHeight = image.height / 4;that.drawImg(image, imgWidth, imgHeight)that.watchKeyUp(image, imgWidth, imgHeight);}image.src = imgUrl;}drawImg(image, imgWidth, imgHeight, dir = 38) {clearInterval(this.timer);this.index = 0;switch (dir) {case 38:this.ctx.drawImage(image, 0, 0, imgWidth, imgHeight, this.x0 - imgWidth / 2, this.y0 - imgHeight / 2, imgWidth, imgHeight);this.timer = setInterval(() => {this.index++;this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);this.ctx.drawImage(image, this.index * imgWidth, 0, imgWidth, imgHeight, this.x0 - imgWidth / 2, this.y0 - imgHeight / 2, imgWidth, imgHeight);if (this.index == 3) {this.index = 0;}}, 1000)break;case 40:this.ctx.drawImage(image, 0, imgHeight * 3, imgWidth, imgHeight, this.x0 - imgWidth / 2, this.y0 - imgHeight / 2, imgWidth, imgHeight);this.timer = setInterval(() => {this.index++;this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);this.ctx.drawImage(image, this.index * imgWidth, imgHeight * 3, imgWidth, imgHeight, this.x0 - imgWidth / 2, this.y0 - imgHeight / 2, imgWidth, imgHeight);if (this.index == 3) {this.index = 0;}}, 1000)break;case 37:this.ctx.drawImage(image, 0, imgHeight * 1, imgWidth, imgHeight, this.x0 - imgWidth / 2, this.y0 - imgHeight / 2, imgWidth, imgHeight);this.timer = setInterval(() => {this.index++;this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);this.ctx.drawImage(image, this.index * imgWidth, imgHeight * 1, imgWidth, imgHeight, this.x0 - imgWidth / 2, this.y0 - imgHeight / 2, imgWidth, imgHeight);if (this.index == 3) {this.index = 0;}}, 1000)break;case 39:this.ctx.drawImage(image, 0, imgHeight * 2, imgWidth, imgHeight, this.x0 - imgWidth / 2, this.y0 - imgHeight / 2, imgWidth, imgHeight);this.timer = setInterval(() => {this.index++;this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);this.ctx.drawImage(image, this.index * imgWidth, imgHeight * 2, imgWidth, imgHeight, this.x0 - imgWidth / 2, this.y0 - imgHeight / 2, imgWidth, imgHeight);if (this.index == 3) {this.index = 0;}}, 1000)break;}}watchKeyUp(image, imgWidth, imgHeight) {let that = this;document.body.onkeydown = function (event) {that.drawImg(image, imgWidth, imgHeight, event.keyCode)};}}let image = new Image();image.onload = function () {// 图片加载完毕；实现图片绘制new Person('canvas').init('./img/run.jpg');}image.src = 'https://uploads.xuexila.com/allimg/1701/907-1F112151431-52.jpg';}}
</script>
坐标转换
移动参考原点的位置
<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');// setTimeout(() => {// ctx.clearRect(0, 0, canvas.width, canvas.height)// }, 10000);// 移动参考原点到100，100的位置ctx.translate(100, 100);ctx.beginPath();ctx.fillRect(100, 100, 100, 100);}}
</script>
设置宽高比
<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');// setTimeout(() => {// ctx.clearRect(0, 0, canvas.width, canvas.height)// }, 10000);// 设置宽高比为1：2ctx.scale(1, 2);ctx.beginPath();ctx.fillRect(100, 100, 100, 100);}}
</script>
旋转:围绕参考原点
- 单位：弧度
<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');// setTimeout(() => {// ctx.clearRect(0, 0, canvas.width, canvas.height)// }, 10000);// 旋转ctx.rotate(Math.PI / 180 * 30);ctx.beginPath();ctx.fillRect(100, 100, 100, 100);}}
</script>
自己为中心旋转
<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');// setTimeout(() => {// ctx.clearRect(0, 0, canvas.width, canvas.height)// }, 10000);ctx.translate(150, 150)// 旋转ctx.rotate(Math.PI / 180 * 30);ctx.beginPath();ctx.fillRect(-50, -50, 100, 100);}}
</script>
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 ...
最新文章
- mysql 二进制日志变化_mysql-二进制日志
- 【C语言也能干大事】第五讲 组合框控件，下拉列表
- 一个路径下挂载(匹配)多个子组件
- 【IDEA】IDEA中使用git将项目上传到码云上
- error40无法打开到sql_SQL-mysql游标与触发器
- CCF NOI1017 价格查询
- python能做什么-python能干嘛
- 物联网感知-基于分布式光纤传感的石油石化管道综合监测
- 增加Java项目经验
- 基于微信评选投票小程序系统设计与实现 开题报告
- 兔子问题与斐波那契数列
- 道友自诉：入职中软一个月（外包华为）就离职了！
- 广东知名企品牌拉芳好迪等的中文域名遭抢注
- 膨胀卷积（空洞卷积）
- Tomcat指定war包路径部署
- 钱颖一：从清华学生身上，我发现了这7个普遍现象……
- Weka Explorer(探索者界面) 详解（1）
- 马云：未必每个企业都要转型，但每个企业都要升级 | 杭州启用全国首个基于人工智能的数据资源平台
- 如何访问西门子S1500PLC的IO系统
- [源码和文档分享]基于Android的益智闯关类游戏“超级小猫”的设计与实现