CANVAS绘制线段

最新推荐文章于 2024-08-18 07:46:46 发布
最新推荐文章于 2024-08-18 07:46:46 发布
阅读量375 收藏
点赞数
分类专栏： HTML5 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011594442/article/details/47250697
版权
本文将介绍如何利用HTML5的Canvas API来绘制虚线，包括设置线型样式和进行虚线绘制的方法。
摘要由CSDN通过智能技术生成
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
< html >
     < head >
         < title >rect
         </ title >
         < style >
           body{
             background: #eeeeee;
           }
 
             #controls{
                 position: absolute;
                 left: 25px;
                 top: 25px;
             }
 
             #canvas{
                 background: #ffffff;
                 cursor: pointer;
                 margin-left:10px;
                 margin-top: 10px;
                 -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                 -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                 -box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
             }
         </ style >
     </ head >
     < body >
 
         < canvas  id = "canvas"  width = "600"  height = "400" >
             Canvas not supported
         </ canvas >
 
         < div  id = "controls" >
             Stroke color: < select  id = "strokeStyleSelect" >
             < option  value = "red" >red</ option >
             < option  value = "green" >green</ option >
             < option  value = "blue" >blue</ option >
             < option  value = "orange" >orange</ option >
     < option  value = "cornflowerblue"  selected>cornflowerblue</ option >
             < option  value = "goldenrod" >goldenrod</ option >
             < option  value = "navy" >navy</ option >
             < option  value = "purple" >purple</ option >
             </ selectid >
 
             Guidewires:
             < input  id = "guidewireCheckbox"  type = "checkbox"  checked/>
     < input  id = "eraseAllButton"  type  =  "button"  value = "Erase all" />
         </ div >
 
         < script  src = "chapetal2.js" ></ script >
     </ body >
</ html >


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
var  canvas = document.getElementById( "canvas" ),
     context = canvas.getContext( "2d" ),
     eraseAllButton = document.getElementById( "eraseAllButton" ),
     strokeStyleSelect = document.getElementById( "strokeStyleSelect" ),
     guidewireCheckbox = document.getElementById( "guidewireCheckbox" ),
     drawingSurfaceImageData,
     mousedown = {},
     rubberbandRect = {},
     dragging =  false ,
     guidewires = guidewireCheckbox.checked;
 
function  drawGrid(color, step, stepy){
     //page 96
}
 
function  windowToCanvas(x, y){
     var  bbox = canvas.getBoundingClientRect();
     return  { x: x - bbox.left * (canvas.width / bbox.width),
              y: y - bbox.top * (canvas.height / bbox.height) };
}
 
//Save and restore drawing surface...............................
function  saveDrawingSurface(){
     drawingSurfaceImageData = context.getImageData(0, 0,
                                                     canvas.width,
                                                     canvas.height);
}
 
function  restoreDrawingSurface(){
     context.putImageData(drawingSurfaceImageData,0,0);
}
 
//Rubber bands..................................................
 
function  updateRubberbandRectangle(loc){
     rubberbandRect.width = Math.abs(loc.x - mousedown.x);
     rubberbandRect.height = Math.abs(loc.y - mousedown.y);
 
     if (loc.x > mousedown.x)  rubberbandRect.left = mousedown.x;
     else                      rubberbandRect.left = loc.x;
 
     if (loc.y > mousedown.y) rubberbandRect.top = mousedown.y;
     else                     rubberbandRect.top = loc.y;
}
 
function  drawRubberbandShape(loc){
     context.beginPath();
     context.moveTo(mousedown.x, mousedown.y);
     context.lineTo(loc.x, loc.y);
     context.stroke();
}
 
function  updateRubberband(loc){
     updateRubberbandRectangle(loc);
     drawRubberbandShape(loc);
}
 
//Guidewires.......................................................
 
function  drawHorizontalLine(y){
     context.beginPath();
     context.moveTo(0, y + 0.5);
     context.lineTo(context.canvas.width, y + 0.5);
     context.stroke();
}
 
function  drawVerticalLine(x){
     context.beginPath();
     context.moveTo(x+0.5, 0);
     context.lineTo(x+0.5, context.canvas.height);
     context.stroke();
}
 
function  drawGuidewires(x, y){
     context.save();
     context.strokeStyle =  'rgba(0, 0, 230, 0.4)' ;
     context.lineWidth = 0.5;
     drawVerticalLine(x);
     drawHorizontalLine(y);
     context.restore();
}
 
//Canvas event handlers.....................................................
 
canvas.onmousedown =  function (e){
     var  loc = windowToCanvas(e.clientX, e.clientY);
     e.preventDefault();  //Prevent cursor change
     saveDrawingSurface();
     mousedown.x = loc.x;
     mousedown.y = loc.y;
     dragging =  true ;
};
 
canvas.onmousemove =  function (e){
     var  loc;
     if (dragging){
         e.preventDefault(); //Prevent selections
 
         loc = windowToCanvas(e.clientX, e.clientY);
         restoreDrawingSurface();
         updateRubberband(loc);
 
         if (guidewires){
             drawGuidewires(loc.x, loc.y);
         }
 
     }
};
 
canvas.onmouseup =  function (e){
     loc = windowToCanvas(e.clientX, e.clientY);
     restoreDrawingSurface();
     updateRubberband(loc);
     dragging =  false ;
};
 
//Controls event handlers...................................................
 
eraseAllButton.onclick =  function (e){
     context.clearRect(0, 0, canvas.width, canvas.height);
     drawGrid( 'lightgray' , 10, 10);
     saveDrawingSurface();
};
 
strokeStyleSelect.onchange =  function (e){
     context.strokeStyle = strokeStyleSelect.value;
};
 
guidewireCheckbox.onchange =  function (e){
     guidewires = guidewireCheckbox.checked;
};
 
//Initialization............................................................
context.strokeStyle = strokeStyleSelect.value;
drawGrid( 'lightgray' , 10, 10);


DRAW DASHEDLINE:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
< html >
     < head >
         < title >rect
         </ title >
         < style >
           body{
             background: #eeeeee;
           }
 
             #canvas{
                 background: #ffffff;
 
             }
         </ style >
     </ head >
     < body >
 
         < canvas  id = "canvas"  width = "600"  height = "400" >
             Canvas not supported
         </ canvas >
 
         < script  src = "chapetal2.js" ></ script >
     </ body >
</ html >


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
var  canvas = document.getElementById( "canvas" ),
     context = canvas.getContext( "2d" ),
     moveToFunction = CanvasRenderingContext2D.prototype.moveTo;
CanvasRenderingContext2D.prototype.lastMoveToLocation = {};
 
CanvasRenderingContext2D.prototype.moveTo =  function (x, y){
     moveToFunction.apply(context, [x, y]);
     this .lastMoveToLocation.x = x;
     this .lastMoveToLocation.y = y;
};
 
CanvasRenderingContext2D.prototype.dashedLineTo =
     function (x, y, dashLength){
     dashLength = dashLength === undefined ? 5 : dashLength;
 
     var  startX =  this .lastMoveToLocation.x;
     var  startY =  this .lastMoveToLocation.y;
 
     var  deltaX = x - startX;
     var  deltaY = y - startY;
     var  numDashes = Math.floor(Math.sqrt(deltaX * deltaX
                                     + deltaY * deltaY) / dashLength);
 
     for ( var  i = 0 ; i < numDashes; ++i){
         this [ i % 2 === 0 ?  'moveTo'  :  'lineTo' ]
             (startX + (deltaX / numDashes) * i,
                 startY + (deltaY / numDashes) * i);
     }
     this .moveTo(x, y);
};
 
 
function  drawDashedLine(context, x1, y1, x2, y2, dashLength){
     dashLength = dashLength === undefined ? 5 : dashLength;
 
     var  deltaX = x2 - x1;
     var  deltaY = y2 - y1;
     var  numDashes = Math.floor(
         Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength);
 
     for ( var  i = 0 ; i < numDashes; ++i){
         context[i% 2 === 0 ?  'moveTo'  :  'lineTo' ]
             (x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i);
     }
 
     context.stroke();
};
 
//context.lineWidth = 3;
//context.strokeStyle = 'blue';
//drawDashedLine(context, 20, 20, context.canvas.width - 20, 20);
//drawDashedLine(context, context.canvas.width-20, 20,
//        context.canvas.width - 20, context.canvas.height - 20, 10);
//drawDashedLine(context, context.canvas.width -20,
//        context.canvas.height - 20, 20, context.canvas.height-20, 15);
//drawDashedLine(context, 20, context.canvas.height-20, 20, 20, 2);
 
context.lineWidth = 3;
context.strokeStyle =  'blue' ;
context.moveTo(20, 20);
context.dashedLineTo(context.canvas.width-20,20);
context.dashedLineTo(context.canvas.width-20,
                      context.canvas.height-20);
context.dashedLineTo(20, context.canvas.height-20);
context.dashedLineTo(20, 20);
context.dashedLineTo(context.canvas.width - 20,
                      context.canvas.height - 20);
context.dashedLineTo(context.canvas.width/2+20,
                      context.canvas.height/2-20);
context.stroke();


Sunyiban
关注
专栏目录
canvas基本使用[数据可视化/绘制线段/矩形/圆/清除画布/绘制文字/柱状图]
sweethhheart的博客
02-04 1418
本文主要介绍canvas基本使用。包括绘制线段、矩形、圆、清除画布、绘制文字与柱状图。
Canvas绘制基本线条的方式
weixin_44613301的博客
02-12 2058
Canvas绘制基本线条的方式 什么是Canvas - Canvas，顾名思义，是一块“画布”，Canvas有着默认的宽(300px)、高(150px); &amp;lt;canvas id=&quot;myCanvas&quot; width=&quot;300&quot; height=&quot;150&quot;&amp;gt;&amp;lt;/canvas&amp;gt; (默认
canvas学习总结三：绘制路径-线段
diannai2478的博客
06-18 352
Canvas绘图环境中有些属于立即绘制图形方法，有些绘图方法是基于路径的。 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText()方法也是立即绘制的，但是文本不算是图形。 基于路径的绘制系统 大多数绘制系统，如：SVG(Scalable Verctor Graphics, 可缩放的矢量图形)，Adobe Illus...
canvas基础：canvas的属性、方法以及基本运用
xd_yangxiaoromg的博客
01-09 5505
一、canvas元素的属性 属性 描述 默认值 width canvas元素绘图表面的宽度。在默认情况下，浏览器会将canvas元素的大小设定成与绘图表面大小一致。然而，如果在css中覆写了元素的大小，那么浏览器则会将绘图表面进行缩放，使之符合元素尺寸 300 height canvas元素绘图表面的高度。浏览器可能会将绘图表面缩放至与元素相同的尺寸。具体请...
canvas总结：线段宽度与像素边界
07-09 482
在canvas中，我们经常需要绘制线段，主要使用moveTo和lineTo两个方法，moveTo移动至线段起始点，lineTo将线段绘制至终点。同时，绘制线段时可以指定线段的宽度，使用lineWidth属性，lineWidth默认为1，必须大于0 moveTo(x,y):移动至坐标x，y lineTo(x,y):线段终点坐标x，y 简单绘制代码如下： var cont...
vue项目中--canvas绘制线段
qq_51196135的博客
03-07 1525
1、templete 2、Javascript 3、浏览器
Vue前端使用canvas绘制线段
Gr_lbxx的博客
07-02 254
【代码】Vue前端使用canvas绘制线段。
Canvas基础: 绘制线段与多边形
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-18 960
Canvas是一个用于图形渲染的HTML元素，通过JavaScript控制其上下文，开发者可以在画布上绘制出复杂的图形。
canvas 如何绘制线段的实现方法
12-14
在学习Canvas绘制线段之前，我们需要了解Canvas的基本概念和结构。 首先，Canvas是一个HTML标签，它的默认尺寸是300px宽和150px高，可以通过`width`和`height`属性调整其尺寸。但需要注意的是，Canvas元素的CSS样式...
canvas绘制线段和箭头
04-27
在HTML5中，可以使用<canvas>元素绘制线段和箭头。以下是一个简单的示例： ``` <!DOCTYPE html> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> var canvas = ...
用Canvas绘制线段（2）
small_ma
07-23 609
用Canvas绘制线段（2） 方法介绍 ctx.moveTo(x,y) 用于移动画笔到(x,y)坐标处，并以此为路径起点进行绘图 ctx.lineTo(x,y) 指定路径的下一个点的坐标，表示使用直线连接该点与上一个点 ctx.stroke() 绘制路径 ctx.lineWidth=20; 设置线段宽度，默认值为1px，较宽的线条在路径上居中，路径上下两边各有...
通过Canvas绘制线段时发现线变宽了颜色变淡了
郭宝的博客
04-12 870
背景 在绘制线段时，发现设置的线段宽度为1像素和线段宽度为2像素的时，最终绘制出来的宽度大致一致，而且在没有设置画笔颜色的情况下，两条线段的颜色却不一样，详细参见以下示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #can..
html5 canvas绘制图形和线段
啨天的博客
08-08 309
canvas 标签在页面只显示一个设定背景颜色画布，如果需要需要产生新内容或者进行画图操作，需要借助canvas API（HTML5 的内置对象context）和JavaScript操作实现画图或者其他图像操作。制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！通常来说网格中的一个单元相当于canvas元素中的一像素。想了解更全面的canvas API可以点击右侧: canvas简介及常用API。..
Canvas线段终点和连线
Wangdanting123的博客
07-01 2149
Canvas线段终点和连线
使用canvas画多个多边形，并在质心填充文字
qq_41687299的博客
07-16 1296
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>canvas绘制多边形</title> <scriptsrc="jquery-1.12.4.min.js"></script> </head> <body> <style> ...
CANVAS绘制多边形
sunyiban的专栏
08-03 1676
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
CANVAS绘制仪表盘
sunyiban的专栏
08-03 1163
​1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> html>
CANVAS 贝塞尔曲线
sunyiban的专栏
08-03 875
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> html>     h
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值