キャンバスに点線を描画する(setLineDash())



Canvas Draw Dotted Line




demo.html:



Title var cvs = document.getElementById('cvs') var ctx = cvs.getContext('2d') /* * Set the size of the blank part and the solid line part when drawing a line. * ctx.setLineDash( [ 5, 3, 2] ) * */ /* * Set the offset when the dashed line is drawn * ctx.lineDashOffset = 3 * */ ctx.lineDashOffset = 3 //Set the offset of the dotted line (the line is not offset, just the virtual position offset) ctx.setLineDash( [5, 4, 3] ) //The size of the solid line part and the white line part are 5,4,3,5,4,3... ctx.moveTo( 10, 10 ) ctx.lineTo( 310, 10 ) ctx.stroke() /* * Get line drawing rules. * ctx.getLineDash() * */ console.log(ctx.getLineDash()) //Array, the length is even (if it is odd, it will be multiplied by 2 to become even)