【前端】HTML5 利用canvas绘制柱状图

2022-05-28 14:22| 来源: 网络整理| 查看: 265

参考链接：https://www.cnblogs.com/linxin/p/6892389.html

参考书籍：《HTML5权威指南》

canvas元素所有功能体现在一个JavaScript对象上，该元素本身只有两个属性：height、width。

var cxt=document.getElementById("myCanvas").getContext("2d");//getContext() 为画布返回绘图上下文 cxt.fillstyle="#FF0000";//获取或设置用于实心图形的样式，默认为black cxt.fillRect(0,0,150,75);//fillRect(x,y,w,h)绘制一个实心矩形，前两个参数是从canvas元素左上角算起的偏移量

画坐标轴 ctx.beginPath() 开始一条新路径ctx.lineWidth=1 线条宽度ctx.strokeStyle="#000000" 线条颜色cxt.moveTo(x,y) 移动到指定坐标而不绘制子路径即线条起点ctx.lineTo(x,y) 绘制一条到指定坐标的子路径即线条终点ctx.stroke() 给子路径描述的图形绘制轮廓线即将起点和终点连成一条线画坐标点 y轴上有多少坐标点由自己定义，需要获取到的数据的最大值来计算y轴上的坐标值。x轴的点则由传入的数据长度决定，坐标值由传入数据的xAxis属性决定。ctx.fillText(value,x,y)填充文字，value为文字值，x y为值的坐标。ctx.textAlign='center' 设置文字居中对齐ctx.fillStyle='#000000' 设置文字填充颜色柱状动画在canvas上通过setInterval、setTimeout和requestAnimationFrame实现动画。柱状即是画矩形，由ctx.fillRect(x,y,width,height)实现。监听鼠标移动事件当鼠标移上去，当前的柱状就变色，移开之后又变回原来的颜色。需要监听mouseover事件，当鼠标的位置位于柱状的面积内，触发事件。

【本文地址】

公司简介

联系我们