2014/09/16-canvas & betiller

This is because canvas. setlinedash is a draft, which is not supported by some browsers.

Requirement: Draw a dotted line.

Analysis: lines include straight lines and curves. The dotted line of a straight line is easy to implement. Let's talk about the implementation of the curve, that is, the realization of the besell curve (three times.

Idea: 1. Calculate the point set of the three besell curves based on the pixel granularity value (refer to wiki );

2. Draw the dotted line based on the obtained vertex set. (The difficulty is to filter the pixel points based on the input parameter dash list)

Code:

VaR dashedbesuppliers = function (CTX, points, dashlist, options) {This. CTX = CTX; this. points = points; this. dashlist = dashlist; this. options = $. extend ({particle size: 100, strokestyle: "#000", linewidth: "1"}, options |{}) ;}; dashedbetiller. prototype = {constructor: dashedbeener, _ pointoncubicbeier: function (CP, T) {var ax, BX, CX; var ay, by, Cy; var tsquared, tcubed; vaR result = {X: 0.0, Y: 0.0};/* calculate the number of multiple compute types */Cx = 3.0 * (CP [1]. x-CP [0]. x); BX = 3.0 * (CP [2]. x-CP [1]. x)-cx; AX = CP [3]. x-CP [0]. x-cx-bx; Cy = 3.0 * (CP [1]. y-CP [0]. y); By = 3.0 * (CP [2]. y-CP [1]. y)-cy; ay = CP [3]. y-CP [0]. y-cy-by;/* calculates the curve position of the numeric value T */tsquared = T * t; tcubed = tsquared * t; result. X = (ax * tcubed) + (BX * tsquared) + (CX * t) + CP [0]. x; result. y = (Ay * tcubed) + (by * tsquared) + (CY * T) + CP [0]. y; return result;}, _ computebezr: function (CP, numberofpoints) {var DT; var I; var curve = []; dt = 1.0/(numberofpoints-1 ); for (I = 0; I <numberofpoints; I ++) curve [I] = This. _ pointoncubicbesuppliers (CP, I * DT); Return curve ;},_ besuppliers: function (controlpoints, T) {return [controlpoints [T]. x, controlpoints [T]. y];}, _ calculatedashedbesuppliers: function (controlpoints, dashpatter N) {var step = 1; // This really shocould be set by an intelligent method, // rather than using a constant, but it serves as an // example. // possibly gratuitous helper functions var Delta = function (P0, P1) {return [P1 [0]-P0 [0], p1 [1]-P0 [1];}; var arclength = function (P0, P1) {var d = delta (P0, P1); Return math. SQRT (d [0] * d [0] + d [1] * d [1]) ;}; var subpaths = []; var loc = This. _ besuppliers (Co Ntrolpoints, 0); var lastloc = LOC; var dashindex = 0; var length = 0; var thispath = []; for (var t = step; t <100; T + = step) {loc = This. _ bezr (controlpoints, T); Length + = arclength (lastloc, Loc); lastloc = LOC; // detect when we come to the end of a dash or space if (length> = dashpattern [dashindex]) {// if we are on a dash, we need to record the path. if (dashindex % 2 = 0) subpaths. push (Thispath); // go to the next dash or space in the pattern dashindex = (dashindex + 1) % dashpattern. length; // clear the arclength and path. thispath = []; length = 0;} // if we are on a dash and not a space, add a point to the path. if (dashindex % 2 = 0) {thispath. push (loc [0], Loc [1]) ;}} if (thispath. length> 0) subpaths. push (thispath); Return subpaths;}, _ pathparts: function (CTX, pathparts) {Var ismove = false; For (VAR I = 0; I <pathparts. length; I ++) {If (pathparts [I]. length! = 0) {If (! Ismove) {CTX. moveTo (pathparts [I] [0], pathparts [I] [1]);} else {CTX. lineto (pathparts [I] [0], pathparts [I] [1]);} ismove =! Ismove;} // var part = pathparts [I]; // If (part. length> 0) // CTX. moveTo (part [0], part [1]); // For (VAR j = 1; j <part. length/2; j ++) {// CTX. lineto (part [2 * j], part [2 * j + 1]); // }}, _ drawdashedbesuppliers: function (CTX, controlpoints, dashpattern) {var dashes = This. _ calculatedashedbesuppliers (controlpoints, dashpattern); CTX. beginpath (); CTX. strokestyle = This. options. strokestyle; CTX. linewidth = This. options. linewidth; this. _ pathparts (CTX, dashes); CTX. stroke () ;}, set_points: function (points) {This. points = points;}, draw: function (CTX) {CTX & (this. CTX = CTX); var CP = [{X: This. points [0], Y: This. points [1]}, {X: This. points [2], Y: This. points [3]}, {X: This. points [4], Y: This. points [5]}, {X: This. points [6], Y: This. points [7]}], curve = This. _ computebezr (CP, this. options. particle size); this. _ drawdashedbezr (this. CTX, curve, this. dashlist );}};

Call:

var dashedBezierInstance = new DashedBezier(            document.getElementById("dashCanvas").getContext("2d"),            [0, 150, 75, 50, 225, 200, 300, 150],            [2, 7],            {                strokeStyle: "#cc0000"            });        dashedBezierInstance.draw();

Call Main

HTML:

<canvas width="400" height="300" id="dashCanvas"></canvas>

Index.html

2014/09/16-canvas & betiller