在echart组件下用canvans画三角形
//使用的canvans绘制的三角形
drawArrow(){
var canvas = document.createElement('canvas');//创建一个元素
canvas.width = 10;
canvas.height = 5;
var ctx = canvas.getContext('2d');
this.draw(ctx,0,0,10,0,5,5,'#ecc818','fill');
return canvas;
}
draw(ctx,x1, y1, x2, y2, x3, y3, color, type){
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx[type + 'Style'] = color;
ctx.closePath();
ctx[type]();//闭合形状并且以填充方式绘制出来
}
为了看着更明显

在哪里调用呢???

相关画三角形的知识(扩展)




在echart组件下用canvans画三角形的更多相关文章
- css3画三角形的原理
以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...
- css伪元素before/after和画三角形的搭配应用
想要实现的效果如下: 第一步:如何用css画出三角形? /* css画三角形 */ .sanjiao{ ; border-top:40px solid red; border-bottom:40px ...
- CSS画三角形引发的一些思考
今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...
- WebGl 利用drawArrays、drawElements画三角形
效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 用DX9画三角形,三个顶点要求
用DX9画三角形,三个顶点的顺序有要求吗下面是全部代码,在 InitVB 函数中被注释掉的数组是我写的,没注释掉的是书上的代码,经过试验我的坐标不能显示出图形,而书上的坐标可以,这是为什么? #i ...
- css画三角形原理解析
<div id="div1"></div><div id="div2"></div><div id=&qu ...
- iOS开发UI-利用Quartz2D 实现基本绘图(画三角形、矩形、圆、圆弧)
1.画三角形 运行结果如下 1.1具体实现步骤 1.1.1首先新建一个project,然后自定义一个view 1.2代码 #import "htingShapeView.h" @ ...
- 菱形实现气泡Bubble,菱形画箭头,菱形画三角形
菱形实现气泡Bubble,菱形画箭头,菱形画三角形 >>>>>>>>>>>>>>>>>>&g ...
- 用CSS的border画三角形
用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...
随机推荐
- Laravel模板事项
1.模板中己显示的时间,可以在此基础上增加时间 请于{{ $order->created_at->addSeconds(config('app.order_ttl'))->forma ...
- Linux动态链接之GOT与PLT
转载于:http://www.cnblogs.com/xingyun/archive/2011/12/10/2283149.html 我们知道函数名就是一个内存地址,这个地址指向函数的入口.调用函 ...
- 【转帖】windows命令行中java和javac、javap使用详解(java编译命令)
windows命令行中java和javac.javap使用详解(java编译命令) 更新时间:2014年03月23日 11:53:15 作者: 我要评论 http://www.jb51.ne ...
- [转帖]爬过这 6 个坡,你就能对 Linux 操作系统了如指掌
爬过这 6 个坡,你就能对 Linux 操作系统了如指掌 http://www.51testing.com/html/16/n-4461316.html 学习的任务 任重道远 我现在处于第一阶段. 发 ...
- ORACLE数据库备份与恢复详解
ORACLE数据库备份与恢复详解 学习过程中的总结,有兴趣不妨看看,如果有不对的地方,高手不要留情!! Oracle的备份与恢复有三种标准的模式,大致分为两 大类,备份恢复(物理上的)以及导入导出(逻 ...
- Minicom 简单使用
一. 什么是minicom 1.1. minicom 是linux 下的一个串口调试工具 二. minicom的使用 2.1. 进入设置 sudo minicom -s 2.1.1. 串口设置 i. ...
- python_操作MySQL 初解 之__<类方法调用并 增-删-改-查>
文件一: 调用(sqls文件) # 导入模块 import pymysql from sqls import * # 创建类 class KaoShi(object): # 初始化 def __ini ...
- ajax实现异步操作实例1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript斑马线表格制作
//实现斑马线表格 //方法1: document.write('<table border="1">'); for(var i=1; i<11; i++){ i ...
- 第五篇 CSS入门 明白 三种嵌套形式,三种常用控制器
CSS入门 css是 层叠式样式表 css的作用是什么呢?举个抽象的例子啊,HTML是人,CSS则是衣服... css给html穿上衣服,有三种形式: 内嵌.内联.外联. 这三种形式,优先级为 ...