//使用的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画三角形的更多相关文章

  1. css3画三角形的原理

    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...

  2. css伪元素before/after和画三角形的搭配应用

    想要实现的效果如下: 第一步:如何用css画出三角形? /* css画三角形 */ .sanjiao{ ; border-top:40px solid red; border-bottom:40px ...

  3. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

  4. WebGl 利用drawArrays、drawElements画三角形

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. 用DX9画三角形,三个顶点要求

      用DX9画三角形,三个顶点的顺序有要求吗下面是全部代码,在 InitVB 函数中被注释掉的数组是我写的,没注释掉的是书上的代码,经过试验我的坐标不能显示出图形,而书上的坐标可以,这是为什么? #i ...

  6. css画三角形原理解析

    <div id="div1"></div><div id="div2"></div><div id=&qu ...

  7. iOS开发UI-利用Quartz2D 实现基本绘图(画三角形、矩形、圆、圆弧)

    1.画三角形  运行结果如下 1.1具体实现步骤 1.1.1首先新建一个project,然后自定义一个view 1.2代码 #import "htingShapeView.h" @ ...

  8. 菱形实现气泡Bubble,菱形画箭头,菱形画三角形

    菱形实现气泡Bubble,菱形画箭头,菱形画三角形 >>>>>>>>>>>>>>>>>>&g ...

  9. 用CSS的border画三角形

    用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...

随机推荐

  1. WCF客户端代理

    创建类库WCFServiceProxy 添加System.ServiceModel.WCFService(见上篇文章)引用 创建类:BookServiceClient using System; us ...

  2. 小米手机Toast带app名称

    如果用小米手机做测试,会发现,Toast弹窗有可能会在前面带app名称.这是因为你传入的context是activity,如果是Application的话,就不会显示app名称.但是,我做测试时,一般 ...

  3. Emgu 学习(4) 使用指针访问图像内存

    在原始图像最初的10行绘制一个颜色条 class Program { static void Main(String[] args) { Mat img = CvInvoke.Imread(@&quo ...

  4. python 学习笔记三 (函数)

    1.把函数视为对象 def factorial(n): '''return n!''' return 1 if n < 2 else n*factorial(n-1) print(factori ...

  5. Oracle表的Rowid字段

    Rowid 字段类型: Rowid 是一行数据的一个唯一标识. ROWID 是数据的详细地址,通过 rowid,oracle 可以快速的定位某行具体的数据的位置. ROWID 可以分为物理 rowid ...

  6. SQLite基础-2.PyCharm+Database_Navigator

    目录 一.PyCharm + Database Navigator插件 二.SQLite Expert – Personal Edition 三.SQLite Administrator 一.PyCh ...

  7. dual Oracle兼容

    CREATE OR REPLACE VIEW dual ASSELECT NULL::"unknown"WHERE 1 = 1;

  8. 设计模式:模板方法(Template method)

    首先我们先来看两个例子:冲咖啡和泡茶.冲咖啡和泡茶的基本流程如下: 所以用代码来创建如下: 咖啡:Caffee.java public class Coffee { void prepareRecip ...

  9. 友善的树形DP

    一棵树,如果有序点对(x,y)之间路径的长度取模于3==0,那么ans0便加上这个长度: 如果取模于3==1,那么ans1便加上这个长度: 如果取模于3==2,那么ans2便加上这个长度: 让你求an ...

  10. 草地排水 洛谷P2740 最大流 入门题目

    草地排水 洛谷P2740 最大流入门题目 题意 在农夫约翰的农场上,每逢下雨,贝茜最喜欢的三叶草地就积聚了一潭水.这意味着草地被水淹没了,并且小草要继续生长还要花相当长一段时间.因此,农夫约翰修建了一 ...