canvas——绘制图片—

图片：

drawImage()：将原图片像素的内容复制到画布上；

第一个参数是源图片，可以是img元素或Image构造函数创建的屏幕外图片对象；

三个参数时：指定图片绘制的x、y坐标；

五个参数时：指定图片绘制的x、y坐标，以及图片的宽度、高度；

九个参数时：裁剪的对象裁剪的位置（x,y）; 裁剪的宽度和高度(w,h); 裁剪后图片绘制的位置(x,y); 图片显示出来的宽度和高度(w,h);

第一个参数是源图片，可以是img元素或Image构造函数创建的屏幕外图片对象；

就意味着不能放图片的地址，不然是不能够绘制的，我们需要把图片加载出来然后再在canvas画板中绘制

eg：ctx.drawImage("./src/h5.png")（这样的代码就是错误的）

eg：

         var img1=new Image()img1.src="./src/h5.png"img1.onload=function(){ctx.drawImage(img1,100,100)}

这样才是正确的写法（推荐）

当然还有一种写法就是直接在body里面写img标签，然后再js代码中去获取，但是在页面中就会显示，并且还需要采用onload函数里面写（），因为js代码必须要在img标签加载好了之后才能获取

动图的制作：

代码思路：

在计时器里面加载图片（精灵图），然后在图片上裁剪不同的位置，显示在canvas画布上

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head>
<style>#box {border: 1px black solid;}
</style><body><!-- <img src="./img/h.png" alt=""> --><canvas id="box" height="700" width="700"> </canvas><script>/** @type {HTMLCanvasElement} */var canvas = document.querySelector("#box")var ctx = canvas.getContext("2d")var img1=new Image()img1.src="./img/h.png"img1.onload=function(){var n=0setInterval(()=>{canvas.width=canvas.widthn++,n=n%10,ctx.drawImage(img1,0+n*108,0,108,101,300,300,108,101)},200)}</script>
</body></html>

n=n%10保证了n的取值范围，使得裁剪的范围不会超过图片的大小，然后每次计时器调用之前会先清空画布

canvas——绘制图片——动图制作相关推荐

html5canvas下绘制gif,JS+canvas操作gif动图
这次给大家带来JS+canvas操作gif动图,JS+canvas操作gif动图的注意事项有哪些,下面就是实战案例,一起来看一下. HTML5 canvas可以读取图片信息,绘制当前图片.于是可以实现 ...
netbeans 添加gif图片_GIF动图制作app下载|GIF动图制作安卓版 v3.9.2 官方免费版
GIF动图制作APP是一款可以让您使用起来非常顺手的GIF动态图片制作软件,用户只需要根据app提供的功能,通过手机摄像头捕捉亲朋好友.家庭宠物等生动.有趣的瞬间,生成动画GIF图片珍藏起来!然后将视 ...
canvas 绘制动态雷达图
canvas 绘制动态雷达图最近收到一个需求,需要做一个预定的动态雷达图,于是绞尽脑汁,基于canvas 终于实现如图的效果: 图片效果: 我是基于vue 来实现的,现在让我们看看具体是如何实现的: ...
在html画一个自动缩放圆环,使用html5 canvas绘制圆环动效
最近笔者有个需求,需求内容为:一组文字显示在圆环的周围,用户可添加文字,文字围绕着圆环,每个词对应圆环周围的的蓝色小圆点,当用户鼠标放在圆环上方小蓝点时时,实现放射出三角形,再显示出文字,先看看动图效 ...
免费GIF动图制作，简简单单一招搞定
免费的GIF动图制作,教你一招搞定,下面就给大家介绍一款好用的gif制作工具,在线一键制作gif动图. 我们在网络聊天中,表情包已经是不可分割的一部分,也是沟通的种的一个桥梁.详细我们每个人的手机里都 ...
R语言绘制gif动图
gapminder是我们要用到的数据,用gganimate来绘制gif动图 install.packages("gapminder") install.packages(" ...
python matplotlib绘制gif动图以及保存
python matplotlib绘制gif动图以及保存标签: python matplotlib 谨以此文纪念我两天来的悲剧昨天我用lstm拟合sin曲线,看到别人画的做的动图很好看,并且还能保 ...
C_教程_gnuplot绘制gif动图
title date tags categories gnuplot绘制gif动图 2019-03-05 18:16:50 -0800 gnuplot 科学绘图技术大家都知道,gnuplot作图功 ...
关于canvas插入gif动图的替代方案
前言:目前canvas是不支持插入gif动图的,但是有些业务要求开发人员可以将gif动图插入到canvas中并进行一系列的操作(移动,缩放,旋转),本人也在网上找了一圈,也没有什么有效的方式,基本都是 ...

canvas——绘制图片——动图制作

canvas——绘制图片——动图制作相关推荐

最新文章

热门文章