canvas绘制动态图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>canvas绘制图片</title><style>canvas{border:1px solid #aaa}</style>
</head>
<body><!-- <img src="./u=2994303401,877800433&fm=27&gp=0.jpg" alt=""> --><canvas width="800" height="600"></canvas><script>var myCanvas = document.querySelector('canvas');var ctx = myCanvas.getContext('2d');//加载图片到内存即可// var img = document.createElement('img')// img.src = './u=2994303401,877800433&fm=27&gp=0.jpg'var image = new Image(); //创建image对象//必须通过图片加载完毕，绑定加载完成事件image.onload = function(){//这里一定可以拿到//实现图片绘制console.log(image)//绘制图片的三种方式//1// ctx.drawImage(image,100,100);//图片对象，绘制在画布上面的坐标x,y//2// ctx.drawImage(image,100,100,100,100)  //加上缩放//3 参数：图片上定位的坐标；在图片上截取多大的区域；绘制在画布上面的坐标；图片的大小// ctx.drawImage(image,400,400,400,400,200,200,200,200)var imageWidth = image.width;//获取当前图片的尺寸var imageHeight = image.height;var personWidth = imageWidth/4; //小人的宽高var personHeight = imageHeight/4;//帧动画，在固定的时间间隔更新显示的图片，根据图片的索引var index = 0;//绘制在画布的正中心//图片绘制的起始点var x0 =ctx.canvas.width/2 - personWidth/2;  //小人的起始位置var y0 = ctx.canvas.height/2 - personHeight/2;ctx.drawImage(image,0,0,personWidth,personWidth,x0,y0,personWidth,personWidth);setInterval(function(){index++;ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)ctx.drawImage(image,index*personWidth,0,personWidth,personWidth,x0+index,y0,personWidth,personWidth);if(index>=3){index =0;}},100);}//设置图片路径image.src='./1.jpg'</script>
</body>
</html>

canvas绘制动态图片相关推荐

canvas 绘制动态雷达图
canvas 绘制动态雷达图最近收到一个需求,需要做一个预定的动态雷达图,于是绞尽脑汁,基于canvas 终于实现如图的效果: 图片效果: 我是基于vue 来实现的,现在让我们看看具体是如何实现的: ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
小程序 uni canvas绘制圆角图片圆角矩形
小程序 uni canvas绘制圆角图片圆角矩形获取canvas的宽度保证适应屏幕 uni.getSystemInfo({success: (res)=> { // res - 各种参数le ...
用C语言画出动态的图片,Qt通过图片组绘制动态图片
本文实例为大家分享了Qt通过图片组绘制动态图片的具体代码,供大家参考,具体内容如下任务实现: 通过定时器的使用来依次调用资源文件中的静态图片文件,从而达到是图片中内容动起来的效果: 效果实现: 实现 ...
html5 简单图片效果,【HTML5】Canvas绘制简单图片教程，
[HTML5]Canvas绘制简单图片教程, 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象的onload方法,调用context对象的drawIm ...
HTML5绘制渐变直线,如何使用HTML5 Canvas绘制动态线性渐变
如果要使用HTML5 Canvas绘制线性渐变,需要用到createLinearGradient()方法.下面我们就来一起看看具体的内容. createLinearGradient() createL ...
微信小程序保存canvas绘制的图片到本地，拒绝图片授权后继续授权
authorizeSaveImg() { //重新授权相册const that = this;wx.getSetting({success(res) {// 第一,直接调取保存,系统会自动调取授权if ...
Canvas 绘制圆形图片、绘制圆角矩形图片
前言在 Canvas 中我们常常遇到的一个需求绘制一个圆形或者一个圆角矩形图像,常用于展示用户头像,我们知道 CSS 有 border-radius 属性,但是 Canvas 是没有的~
利用canvas绘制动态仪表盘
Created by Jerry Wang on Aug 04, 2014 该library的github地址:http://bernii.github.io/gauge.js/ 创建一个新的BSP ...
小程序canvas绘制商品海报实现分享朋友圈
小程序canvas绘制商品海报实现分享朋友圈效果图: 实现步骤就是点击生成图片在canvas画布中画出一张海报然后保存在本地在imags标签中展示,此处尽可能的把canvas组件隐藏但是不能 ...

canvas绘制动态图片

canvas绘制动态图片

canvas绘制动态图片相关推荐

最新文章

热门文章