hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

canvas绘制工作流之绘制节点_WEB前端开发

2019-12-01后端开发ki4网23°c
A+ A-
这篇文章重要引见用canvas绘制流程节点。

绘制前我们须要先预备一张节点图片,比方:;好了,正题入手下手:

在html中增加canvas标签:

<canvas id="canvasId" width = "800" height="600" style="border:1px solid black;  margin-left: 1px;"></canvas>

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

【相干课程引荐:JavaScript视频教程】

猎取画布对象并初始化画布参数

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();
}

绘制完结果如图:

猎取节点图片对象

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

我这里为了举个例子直接建立图片对象,现实绘制过程当中能够直接猎取图片对象,由于动态建立图片对象是有个图片加载的时候。

绘制节点图片

ctx.drawImage(_img,_x,_y,_imgWidth, _imgHeight);

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

现实运用过程当中,平常都会当去鼠标的位置当作x坐标跟y坐标,细致的背面文章会引见到。

绘制的结果图:

本文来自 js教程 栏目,迎接进修!

以上就是canvas绘制工作流之绘制节点的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
canvas绘制工作流之绘制节点_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>