html5画布画点,使用JavaScript在HTML5画布上绘制大量的点

既然你在评论部分提出了一个完全不同的问题,我想给它另一个答案.

评论和工作代码内联.

var margin = {top: 20, right: 20, bottom: 20, left: 40},

w = 100 - margin.left - margin.right,

h = 100 - margin.top - margin.bottom;

var canvas = d3.select("canvas")

.node();

var context = canvas.getContext('2d');

var data = d3.range(11).map(function(){return Math.random()*10})

var x = d3.scale.linear().domain([0, 10]).range([0, 700]);

var y = d3.scale.linear().domain([0, 10]).range([10, 290]);

var line = d3.svg.line()

.interpolate("cardinal")

.x(function(d,i) {console.log(x(i));return x(i);})

.y(function(d) {return y(d);})

//making a dummy SVG

var path = d3.select("body").append("svg").append("path")

.attr("d", line(data))

.attr("stroke", "steelblue")

.attr("stroke-width", "2")

.attr("fill", "none").remove();

d3.select("body svg").remove();

//going from 0 to the paths total length and storing all the points

var points = [];

for(var i =0; i < path.node().getTotalLength(); i++){

points.push(path.node().getPointAtLength(i));//store point @ that length

}

var id = window.setInterval(function(){

console.log("Doing")

var point = points.shift();//take each point

context.strokeStyle="red";

context.lineWidth="1";

context.lineTo(point.x,point.y);

context.stroke();

if(points.length <= 0){

console.log("Finished")

window.clearInterval(id);//clear the interval since the drawing is complete

}

}, 10)

Plunker上的工作代码.