RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:9:30-18:00
扫码咨询
关闭右侧工具栏
画布框架动画吃苹果小游戏
  • 作者:admin
  • 发表时间:2021-02-26 07:51
  • 来源:未知

本文主要介绍用Html5饼图绘制统计图的方法,通过样例代码详细介绍,对大家的学习或工作有一定的参考学习价值。有需要的朋友可以和边肖一起学习。

Html5提供了强大的绘图API,让我们可以使用javascript轻松绘制各种图形。本文将主要说明用HTML5绘制饼图(统计图)的方法。先看饼图效果:

这个图是动态生成的,饼图是根据传入的比例参数(数组)动态绘制的。饼图的大小也是根据其高度动态调整的。

整个代码如下:

这个功能可以直接使用。如果你想让它变得更漂亮,你可以添加一些额外的美丽的图画。

这个代码最大的灵活性是将绘图参数和绘图代码分开,饼图的大小根据Canvas容器的高度自动调整。传递参数如下:

!声明文档类型

超文本标记语言

meta charset='utf-8 '

标题框架动画/标题

/head

身体

canvas id=' canvas ' width=' 400 ' height=' 300 '/canvas

div class=' '

button class=' start-BTN ' type=' button '再次吃东西/button

button class=' end-BTN ' type=' button '停止进食/button

button class=' pause-BTN ' type=' button '休息一下/button

按钮类='继续-BTN '类型='按钮'继续吃/按钮

/div

脚本类型='text/javascript '

const canvas=document . getelementbyid(' canvas ')

canvas.style.border='1px纯黑'

const ctx=canvas.getContext('2d ')

Const img=new Image() //创建图片对象

让定时器//定时器标识符

设毫秒=300 //执行时间间隔

设colIndex=0 //列数

设rowIndex=0 //行数

Const timerFun=()={//声明定时器执行函数

console . log(' set timer ');

CTX.clearrect (0,0,canvas.style.width,canvas . style . height)//清除画布

If (rowIndex 3) {//如果是前5帧,

Ctx。drawimage (img,colindex * 240,rowindex * 240,200,200,50,50,200,200)//图片对象,x坐标,y坐标(注意:位于图片上的坐标),宽度,高度(截取在图片上的大小),x坐标,

ColIndex //下一帧

if (colIndex 4) {

colIndex=0

行索引

}

} else {

colIndex=0

rowIndex=0

}

}

img.onload=()={

定时器=设置时间间隔(定时器,毫秒)

}

img.src='image/apple.jpg '

const start BTN=document . GetElementsByclassname(' start-BTN ')[0]

const end BTN=document . GetElementsByclassname(' end-BTN ')[0]

const pauseBtn=document . getelementsbyclassname(' pause-BTN ')[0]