canvas绘制图片及相关知识

最新推荐文章于 2024-04-20 16:29:18 发布
最新推荐文章于 2024-04-20 16:29:18 发布
阅读量149 收藏
点赞数
分类专栏： egret 文章标签： 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42276579/article/details/108100770
版权

假设我要把下面这张图片绘制到canvas上
在这里插入图片描述

方法1

代码如下
调用的是canvas drawImage(img, x, y)方法
img是要绘制的图片，绘制到画布的x,y位置

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas一些知识</title>
</head>

<body>

    <p>要使用的图片:</p>
    <img id="img1" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597829802835&di=26c2e23a5cd92357989f923a4a14c5b8&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F09fa513d269759ee14f75c95b3fb43166c22dfcc.jpg">
    <p>画布:</p>
    <canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("img1");
    img.onload = function () {
        ctx.drawImage(img, 10, 10);
    }
</script>

</body>

</html>

绘制结果
在这里插入图片描述
没有绘制完全，因为画布比原图小

方法2

那我们可以规定一下绘制到画布的大小
调用的是canvas drawImage(img, x, y，width， height)方法

// 前略。。。
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("img1");
    img.onload = function () {
        ctx.drawImage(img, 10, 10, 400, 300);
    }
</script>
// 后略。。。

效果如下
在这里插入图片描述
那如果我只想绘制红框部分到画布呢？
在这里插入图片描述

方法3

调用方法和定义如下
在这里插入图片描述

// 前略。。。
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("img1");
    img.onload = function () {
        ctx.drawImage(img, 180, 120, 690, 570, 0, 0, 400, 300);
    }
</script>
// 后略。。。

效果
在这里插入图片描述

拓展1

现在我们知道可以绘制原图的一部分到画布了
在我们开发过程中，经常会使用图集（精灵图）做加载优化
比如游戏的技能图标图集
在这里插入图片描述
然后有一个文件来记录每张图在图集中的位置
那我们就可以分别把每个图标绘制到画布上了

{"file":"skillimg.png","frames":{
"skill5304":{"x":57,"y":228,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"skill5305":{"x":0,"y":228,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"skill5501":{"x":171,"y":171,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"skill5502":{"x":114,"y":171,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"skill5503":{"x":57,"y":171,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"skill5504":{"x":0,"y":171,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"skill5505":{"x":171,"y":114,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"skill5601":{"x":114,"y":114,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"skill5602":{"x":57,"y":114,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"skill5603":{"x":0,"y":114,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"skill5604":{"x":171,"y":57,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"skill5605":{"x":114,"y":57,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"skill5301":{"x":57,"y":57,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"skill5302":{"x":0,"y":57,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"skill5303":{"x":171,"y":0,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"dominateskill1":{"x":114,"y":0,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"dominateskill2":{"x":57,"y":0,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55},
"dominateskill3":{"x":0,"y":0,"w":55,"h":55,"offX":0,"offY":0,"sourceW":55,"sourceH":55}}}

拓展2

我们还可以实现序列帧动画
只要定时按顺序绘制图片即可
比如下面例子

在这里插入图片描述
记录每一帧的位置的文件

"mc": {
            "r": {
                "frameRate": 12,
                "frames": [
                    { "res": "155", "x": -72, "y": -115 },
                    { "res": "156", "x": -72, "y": -116 },
                    { "res": "157", "x": -75, "y": -114 },
                    { "res": "158", "x": -76, "y": -113 },
                    { "res": "159", "x": -74, "y": -115 },
                    { "res": "160", "x": -74, "y": -117 },
                    { "res": "161", "x": -74, "y": -116 },
                    { "res": "162", "x": -73, "y": -112 }

                ]
            }
        },
        "res": {
            "155": { "x": 0, "y": 0, "w": 111, "h": 121 },
            "156": { "x": 111, "y": 0, "w": 111, "h": 124 },
            "157": { "x": 222, "y": 0, "w": 113, "h": 126 },
            "158": { "x": 335, "y": 0, "w": 122, "h": 130 },
            "159": { "x": 457, "y": 0, "w": 116, "h": 132 },
            "160": { "x": 573, "y": 0, "w": 109, "h": 130 },
            "161": { "x": 682, "y": 0, "w": 110, "h": 127 },
            "162": { "x": 792, "y": 0, "w": 117, "h": 120 }

        }

代码

// 前略。。。
<script>
     var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = new Image();
    var oldTime = 0;
    var index = 0;
    img.onload = function () {
        let frameTime = 1000 / frameData.mc.r.frameRate;
        let frames = frameData.mc.r.frames;
        
        requestAnimationFrame(next);

        function next() {
            let curTime = new Date().getTime(); 
            if (curTime - oldTime > frameTime) {
                oldTime = curTime
                index++;
                if (index > frames.length - 1) {
                    index = 0;
                }
                ctx.clearRect(0, 0, c.width, c.height);
                let res = frameData.res[frames[index].res];
                ctx.drawImage(img, res.x, res.y, res.w, res.h, frames[index].x + 200, frames[index].y + 200, res.w, res.h);
            }
            requestAnimationFrame(next);
        }
    }
    let frameData = {
        "mc": {
            "r": {
                "frameRate": 12,
                "frames": [
                    { "res": "155", "x": -72, "y": -115 },
                    { "res": "156", "x": -72, "y": -116 },
                    { "res": "157", "x": -75, "y": -114 },
                    { "res": "158", "x": -76, "y": -113 },
                    { "res": "159", "x": -74, "y": -115 },
                    { "res": "160", "x": -74, "y": -117 },
                    { "res": "161", "x": -74, "y": -116 },
                    { "res": "162", "x": -73, "y": -112 }

                ]
            }
        },
        "res": {
            "155": { "x": 0, "y": 0, "w": 111, "h": 121 },
            "156": { "x": 111, "y": 0, "w": 111, "h": 124 },
            "157": { "x": 222, "y": 0, "w": 113, "h": 126 },
            "158": { "x": 335, "y": 0, "w": 122, "h": 130 },
            "159": { "x": 457, "y": 0, "w": 116, "h": 132 },
            "160": { "x": 573, "y": 0, "w": 109, "h": 130 },
            "161": { "x": 682, "y": 0, "w": 110, "h": 127 },
            "162": { "x": 792, "y": 0, "w": 117, "h": 120 }

        }
    }
    img.src = "r.png"
</script>
// 后略。。。

效果
在这里插入图片描述

liuyonggen123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas绘制图片drawImage使用方法
11-19
不得不说，html5中的canvas真的非常强大，从图片处理，到视频处理，再到游戏开发，都能见到canvas的身影，然而，就这一个标签，功能居然如此强大，这主要归功于canvas强大的API，也正是因为这么多的API，让很多人对canvas望而却步。
canvas 绘制图片
huaweichenai的博客
12-31 9088
前面我们了解了canvas的一些基本使用方法，在canvas中我们还可以在canvas中直接绘制图片，在canvas中绘制图片主要使用到drawImage方法 一：drawImage方法参数有三中情况 1：三个参数 ctx.drawImage(image,dx,dy) image：需要绘制的img图片 dx,dy：绘制的img图片在canvas中的坐标(x,y) 2：五个参数 c...
Canvas[详解] —— 一篇教你学会Canvas和如何快速绘制图形
最新发布
Lan_0316的博客
04-20 2180
Canvas是HTML5中的一个标签，用于在网页上动态生成图像和图形。
canvas绘制图片
姚辉乾
08-29 413
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;         &lt;style&gt;             *{                 margin: 0;  
canvas绘制图片的三种方法（图文示例）
大剑师兰特的GIS世界
01-16 2309
如何使用canvas来绘制图片呢？这里有三种方法。 语法： drawImage(image, dx, dy) drawImage(image, dx, dy, dWidth, dHeight) drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
canvas——绘制图片
sleepwalker_1992的专栏
06-05 1万+
绘制图片（drawImage） （重点） 1、基本绘制图片的方式 context.drawImage(img,x,y); 参数说明： x,y 绘制图片左上角的坐标， img是绘制图片的dom对象。 2、 在画布上绘制图像，并规定图像的宽度和高度 context.drawImage(img,x,y,width,height); 参数说明：width 绘制图片的...
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
10-17
主要介绍了Vue使用Canvas绘制图片、矩形、线条、文字，下载图片的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
【HTML5】Canvas绘制简单图片教程
09-28
要绘制图片，首先创建一个新的`Image`对象，并设置其`src`属性为图片的URL。然后，添加一个`onload`事件处理函数，在图片加载完成后进行绘制： ```javascript var img = new Image(); img.src = "1.jpg"; img....
html5 canvas自动绘制背景图片效果代码
11-06
以上就是关于"html5 canvas自动绘制背景图片效果代码"的知识点详解。通过HTML5 Canvas，我们可以灵活地控制网页的视觉呈现，为用户提供更加生动和个性化的交互体验。无论是简单的背景绘制还是复杂的动画效果，Canvas...
微信小程序：实现canvas绘制地图及简单拖动
03-17
在微信小程序中，Canvas是一...总的来说，微信小程序中的Canvas绘制地图并实现拖动功能，涉及到地图API的使用、Canvas绘图技术以及触摸事件的处理。理解并掌握这些知识点，可以帮助开发者创建出更具交互性的地图应用。
HTML5 canvas 9绘制图片实例详解
09-01
下面是 HTML5 canvas 9绘制图片的详细知识点： 一、Canvas 元素 Canvas 元素是 HTML5 中的一个新的元素，用于在网页中绘制图形和图像。Canvas 元素可以和 JavaScript 结合使用，实现动态的绘制操作。 二、2D ...
canvas绘制图片详解
ITzhongzi的博客
03-10 1538
创建对象的方式 script>     var canvas = document.getElementById("canvas");     var ctx = canvas.getContext("2d");     //1、     var img1=document.createElement("img");     img1.src="../图片/beauty/5
将图片画到canvas 上的几种方法
热门推荐
天天的博客
09-22 7万+
任何的知识体系，都是由小的知识体系构成，你要想成为高手 无法第一步就是把所有的琐碎的知识都搞定它！ 写的多了，自然就会了，这也是为啥要写笔记，写笔记的过程本身就是复习的过程，你想写 它个几千篇笔记， 你要说你不会， 人家肯定也不相信！ canvas 画图片的 第一种，就是在画布的坐标上，直接将图片画到上面去，此时 假如图片大小超出了画布，图片也不缩放 /*3参数*/ ...
10Canvas——图片绘制
Blog of Lytracy
08-10 816
文章目录 使用 drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分，或增加或减少图像的尺寸。 canvas 绘制图片的基本格式为： /创建一个图片对象 var image = new Image(); //设置图片的路径 image.src = 'xxx'; //当图片加载完成后 image.onload = function () { //绘制图片 ctx.drawImage(); }; 语法 1，在画布上定位图像： ctx.drawI
canvas---绘制视频/图片
maidu_xbd的博客
06-24 203
效果如下： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
HTML5——Canvas画布绘制图像、绘制线型和绘制图片
叶落无痕的个人主页
10-16 1535
canvas中创建路径，绘制线型，绘制图片
HTML5 Canvas 开发 绘图方法整理 【六、canvas image /canvas绘制图片、平铺图片】
freedomVenly的博客
02-16 1179
绘制图片目前有三种调用的方式 ： 1、ctx.drawImage(image,dx,dy); //image 是要显示的图片 dx与 dy 是图片左上角 的横坐标 与 纵坐标， 这种方法中引用的图片可以是JS 创建的，也可以是 直接引用页面中 img标签的图片 2、ctx.drawImage(image, dx, dy, dw, dh); 与上面...
HTML5.Canvas.基础教程教程.pdf
03-05
对于图像的处理，我们可以使用`drawImage()`方法将图片绘制到Canvas上。至于文本，Canvas提供了`fillText()`和`strokeText()`方法来绘制文本，可以调整字体、颜色和对齐方式。 这份HTML5 Canvas基础教程提供了一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值