上一篇我们介绍了canvas绘制工作流的大概步骤,接下来会有系列文章细致的介绍怎么用canvas绘制工作流;这篇文章主要介绍用canvas绘制流程节点。

绘制前我们需要先准备一张节点图片,例如:;好了,正题开始:

  1. 在html中添加canvas标签:
<canvas id="canvasId" width = "800" height="600" style="border:1px solid black;  margin-left: 1px;"></canvas>

这里要注意设置canvas标签的宽度跟高度,也就是要设置画布的宽度跟高度。

  1. 获取画布对象并初始化画布参数
var _canvas= document.getElementById(“canvasId”);

var _height = _canvas.height;//获取画布高度

var _width = _canvas.width;//获取画布宽度

Var ctx =_canvas.getContext('2d');

//画个画布大小的长方形,目的是为了有个好看的小边框框
ctx.clearRect(0, 0, _width, _height); /*绘制画布的背景线*/
//设置线宽
ctx.lineWidth = 0.1;
//绘制纵向背景线
for(var i = 1; i < _width / 15; i++) {
ctx.beginPath();
ctx.moveTo(i * 15, 0);
ctx.lineTo(i * 15, _height);
ctx.stroke();
}
//绘制横向背景线
for(var i = 1; i < _ height / 15; i++) {
ctx.beginPath();
ctx.moveTo(0, i * 15);
ctx.lineTo(_width, i * 15);
ctx.stroke();
}

绘制完效果如图:

  1. 获取节点图片对象

     //创建新的图片对象
    
     var _img = new Image();
    
      //指定图片的URL
    
     _img.src="node.png";

我这里为了举个例子直接创建图片对象,实际绘制过程中可以直接获取图片对象,因为动态创建图片对象是有个图片加载的时间。

  1. 绘制节点图片
ctx.drawImage(_img,_x,_y,_imgWidth, _imgHeight);

这里_img是上面获取到的图片对象,_x是图片要绘制在画布中的x坐标,_y是图片要绘制在画布中的_y坐标,_imgWidth是要将图片绘制的宽度,_imgHeight是要将 图片绘制的宽度。

实际应用过程中,一般都会当去鼠标的位置当做x坐标跟y坐标,具体的后面文章会介绍到。

绘制的效果图:

节点下面的文字后面文章会详细讲到怎么绘制。

每天get一点点,每天成长一点点,好了,今天就到这里。

canvas绘制工作流之绘制节点的更多相关文章

  1. 神奇的canvas——点与线绘制的绚丽动画效果

    代码地址如下:http://www.demodashi.com/demo/11636.html 前言 之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效果 ...

  2. JavaScript+canvas 利用贝塞尔曲线绘制曲线

    效果图: <body> <canvas id="test" width="800" height="300">< ...

  3. canvas自适应圆形时钟绘制

    前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...

  4. Canvas:橡皮筋线条绘制

    Canvas:橡皮筋线条绘制 效果演示 实现要点 事件监听 [说明]: 在Canvas中检测鼠标事件是非常简单的,可以在canvas中添加一个事件监听器,当事件发生时,浏览器就会调用这个监听器. 我们 ...

  5. HTML5 Canvas(实战:绘制饼图2 Tooltip)

    继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...

  6. canvas与工作流的不解之缘

    html的标签 <canvas>用于图形的绘制,通过脚本 (通常是JavaScript)来完成,canvas简而言之就是个画布.上一篇文章我们提到工作流的一个重要组成部分:流程建模,也就是 ...

  7. ArcGis For Silverlight API,地图显示Gis,绘制点,线,绘制图等--绘制点、线、圆,显示提示信息

    ArcGis For Silverlight API,地图显示Gis,绘制点,线,绘制图等--绘制点.线.圆,显示提示信息 /// <summary> /// 绘制界面上的点和线 ///  ...

  8. 12-UIKit(View绘制、绘制曲线、绘制文字、贴图)

    目录: 1. View绘制 2. 绘制曲线 3. 绘制文字 4. 贴图 回到顶部 1. View绘制 1.1 做出自己的视图对象 TRCell : UITableViewCell : UIView U ...

  9. Unity3D研究院之游戏对象的访问绘制线与绘制面详解(十七)

    一眨眼学习Unity3D 也有一段时间了,基本已经拿下了这套游戏引擎,回过头来想想以前写的RPG 游戏引擎,越来越发现以前写的就是垃圾.人果然是要不断学习与不断进步,好好学习,天天向上.哇咔咔- 加油 ...

随机推荐

  1. 从键盘录入输入3 个数num1,num2,num3,按从大到小进行输出

    本题分别使用嵌套分支语句以及三目运算符来实现,两种方法,可以对比看看. import java.util.Scanner; /** * 从键盘录入输入3 个数a,b,c,按从大到小进行输出 * @au ...

  2. GUI tkinter (Entry) 输入框篇

    """1.其他函数不常用,这里只说get函数,get函数使用的时候不需要任何参数,它的返回值就是该输入框的内容.""" from tkint ...

  3. 深度长文回顾web基础组件

    什么是Serlvet ? 全称 server applet 运行在服务端的小程序: 首先来说,这个servlet是java语言编写的出来的应用程序,换句话说servlet拥有java语言全部的优点,比 ...

  4. 像智能手机一样管理云端应用:阿里云联合微软全球首发开放应用模型(OAM)

    2019 年 10 月 17 日上午 9 点 15 分,阿里巴巴合伙人.阿里云智能基础产品事业部总经理蒋江伟在 QCon 上海<基于云架构的研发模式演进>主题演讲中,正式宣布: " ...

  5. java位运算,逻辑运算符

    位运算逻辑运算符包括: 与(&),非(~),或(|),异或(^). &:  条件1&条件2  ,只有条件1和条件2都满足, 整个表达式才为真true,  只要有1个为false ...

  6. 虚拟机桥接模式下将虚拟IP设为静态IP

    一:虚拟机设置桥接模式 1.进入虚拟机设置中将网络适配器设置成桥接模式,如下图 2.编辑--虚拟网络编辑器--选择桥接 3.如上图中桥接模式下的桥接到--将自动改成与本机匹配的虚拟网卡,本机虚拟网卡查 ...

  7. powershell(一)

    Windows powershell是一种命令行外壳程序和脚本环境,它内置在win7以上版本的操作系统中,使命令行用户和脚本编写者可以利用.NET Framework的强大功能.powershell程 ...

  8. [HNOI2013][BZOJ3143] 游走 - 高斯消元

    题目描述 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点,获得等于这条边 ...

  9. php数组怎么根据其中的一个值进行排序?解决方法

    有一个数组如下 我想对其进行一个排序,按照其“sort”的值的大小进行排序,3->4->7. 解决方法如下: 1.首先介绍php的两个方法 方法一:array_column() 返回输入数 ...

  10. MySQL注入--Payload

    MySQL注入--Payload Mirror王宇阳 2019-10-22 SQL的注入流程一般如下: 1.判断是否有SQL注入漏洞(判断注入点) 2.判断数据库的系统架构.数据库名.web应用类型等 ...