在HTML5 Canvas上绘制虚线？ [英] Drawing Dashed lines on HTML5 Canvas?

问题描述

我想在HTML5 canvas上绘制一些虚线。但我找不到有这样的功能。画布路径只能绘制实线。人们试图在CSS中使用一些边框特征（虚线，虚线）来绘制虚线，但它们只能是水平或垂直的。所以我被困在这。我还找到一个名为 RGraph 的图书馆，它可以绘制虚线。但使用外部库会使绘图真的很慢。任何身体都有一个想法如何实现这一点？任何帮助将不胜感激。

I would like to draw some dashed lines on HTML5 canvas. But I couldn't find there is such a feature. the canvas path could only draw solid lines. And people have tried to use some border feature (dotted, dashed) in CSS to draw dashed lines, but they could only be horizontal or vertical. So I got stuck on this. I also found a library called RGraph and it could draw dashed lines. But using an external library would make the drawing really slow. So does any body has an idea how to implement this? Any help will be appreciated.

推荐答案

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.setLineDash([5, 3]);/*dashes are 5px and spaces are 3px*/
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

这篇关于在HTML5 Canvas上绘制虚线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！