canvas实现一个线性图

先写一个借用图片的简单线性图

方法 `drawImage(image, x, y)` 其中 `image` 是 image 对象，`x` 和 `y 是其在目标 canvas 里的起始坐标。`

 var canvas = document.getElementById('canvas');canvas.width='300';canvas.height='300';var ctx = canvas.getContext('2d');draw()function draw(){var image = new Image();//创建Image对象image.src='images/1.png';//指定路径image.onload=function(){//图片加载完成后执行的函数ctx.drawImage(image,0,0);//绘制图片ctx.beginPath();//这里开始画线条ctx.moveTo(30,106);ctx.lineTo(70,46);ctx.lineTo(103,76);ctx.lineTo(170,15);//执行绘画ctx.stroke();}}

结果如下

来一个全部自己划线的（包括坐标）

var canvas = document.getElementById('canvas');canvas.width='600';canvas.height='300';var ctx = canvas.getContext('2d');var x0=30,//x轴0处坐标y0=280,//y轴0处坐标x1=560,//x轴顶处坐标y1=30,//y轴顶处坐标dis=30;draw();function draw(){//先绘制X和Y轴ctx.beginPath();ctx.lineWidth=1; ctx.moveTo(x0,y1);//笔移动到Y轴的顶部ctx.lineTo(x0,y0);//绘制Y轴ctx.lineTo(x1,y0);//绘制X轴ctx.stroke();//绘制虚线和Y轴值  var yDis = y0-y1;var n=1;ctx.fillText(0,x0-20,y0);//x,y轴原点显示0ctx.save();while(yDis>dis){ctx.beginPath();//每隔30划一个虚线ctx.setLineDash([2,2]);//实线和空白的比例ctx.moveTo(x1,y0-dis);ctx.lineTo(x0,y0-dis);ctx.fillText(dis,x0-20,y0-dis);//每隔30划一个虚线dis+=30;ctx.stroke();}ctx.restore();var xDis=90//设定月份之前的间距//绘线条、底部的月份、数据值ctx.beginPath();for(var i=0;i<6;i++){//假设有6个月var height = Math.round(Math.random()*220+20);//在一定范围内随机高度var rectX=x0+xDis*i,//x位置rectY=height;//y位置ctx.lineTo(rectX,y0-rectY);//设定线的走向ctx.fillText((i+1)+'月份',rectX-10,y0+15);//绘制最下面的月份ctx.fillText(rectY,rectX,y0-rectY-5);//显示值}//最后统一划线ctx.stroke();}

效果图

canvas实现一个线性图相关推荐

python程序、画一个笑脸_使用Canvas绘制一个笑脸图
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var data = [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ...
用canvas画一个太极图（八卦图）
用canvas画一个太极图(八卦图) 源码展示链接: https://yanhappiness.github.io/Notes/canvas_src.html 理解什么是canvas canvas是H ...
html5 自动扣图,利用canvas实现一个抠图小工具
本文作者:IMWeb 孙世吉未经同意,禁止转载利用canvas实现一个抠图小工具 0 前言作为新一代的前端开发工程师,PS抠图切图已经不是必备技能了,我们有UI/交互/视觉等更专业的设计同学帮我 ...
第166天：canvas绘制饼状图动画
canvas绘制饼状图动画 1.HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 < ...
封装构造函数，用canvas写饼状图和柱状图
封装构造函数,用canvas写饼状图和柱状图封装函数 // 场景 function XDLScence( options ) {this.stage = options.stage;//执行场景的初 ...
利用微软平台生成报表,线性图,柱形图
说来惭愧,以前的工作中一直借助第三方dll进行报表制作,比如线性图,柱形图. 因为现在工作的这家公司不允许随便引入第三方dll,听同事说起可以建rdl类型文件进行引入到winform窗体中,窗体上使用 ...
canvas 封装一个自己的 icon 库
canvas 封装一个自己的 icon 库 1. 概述 2. 实验目标 3. 实现思路解析与代码 3.1 创建文件 3.2 实现思路 3.3 完整代码 4. end 1. 概述一个好的前端,是能够在 ...
用canvas实现九宫格切图之手把手教学（uniapp+ts）
uniapp用canvas实现九宫格切图(typescript) 前言上传图片展示图片画布下载图片最终效果总结前言这几天工作比较轻松,所以就有时间发下呆,突然想起前段时间用了一个九宫格 ...
小程序利用canvas实现波浪动态图，原生canvas的部分限制
小程序利用canvas实现波浪动态图小程序的canvas与该动态图的问题首先上效果图片下面直接上代码小程序的canvas与该动态图的问题小程序的canvas与html的canvas实现是完全 ...

canvas实现一个线性图

先写一个借用图片的简单线性图

方法 `drawImage(image, x, y)` 其中 `image` 是 image 对象，`x` 和 `y 是其在目标 canvas 里的起始坐标。`

来一个全部自己划线的（包括坐标）

canvas实现一个线性图相关推荐

最新文章

热门文章

canvas实现一个线性图

先写一个借用图片的简单线性图

方法 drawImage(image, x, y) 其中 image 是 image 对象，x 和 y 是其在目标 canvas 里的起始坐标。

来一个全部自己划线的（包括坐标）

canvas实现一个线性图相关推荐

最新文章

热门文章

方法 `drawImage(image, x, y)` 其中 `image` 是 image 对象，`x` 和 `y 是其在目标 canvas 里的起始坐标。`