d3高级应用专题 二 在Canvas中绘制形状

//  假定页面中存在ID为canvas的canvas元素var canvas = document.getElementById('canvas'),     svgCtx = d3.select('#svgCanvas'),    //  获取canvas的上下文    canvasCtx = canvas.getContext('2d'),    datas = [[10, 10],[50, 10], [100, 60], [150, 15], [200, 55], [250, 60], [300, 80], [350, 50], [400, 70]];//  创建线性路径生成器var lineCreator = d3.line()                .x(function(d){                    return d[0];                })                .y(function(d) {                    return d[1];                })                .curve(d3.curveBasis);/**  * 在HTML5的canvas元素中绘制  */function drawInCanvas() {    //  设置线的宽度      canvasCtx.lineWidth = 2;    //  设置线的颜色    canvasCtx.strokeStyle = 'blue';    //  设置绘制的上下文    lineCreator.context(canvasCtx);    //  设置数据    lineCreator(datas);    //  绘制路径    canvasCtx.stroke();}/**  * 在SVG元素中绘制  */function drawInSvg() {    //  必须要将上下文置空    lineCreator.context(null);    //  添加路径元素    svgCtx.append('path')           .attr('d', lineCreator(datas))           .attr('stroke-width', '2px')           .attr('stroke', 'blue')           .attr('fill', 'none')}//  在Canvas元素中绘制drawInCanvas();//  在SVG元素中绘制drawInSvg();

d3第4版添加了对Canvas的支持，在d3.shape包中的每一个形状都可以直接绘制在Canvas上，可以很方便地将SVG的代码应用到Canvas上。

在Canvas与SVG中绘制路径的代码示例如下：

//  假定页面中存在ID为canvas的canvas元素var canvas = document.getElementById('canvas'),     svgCtx = d3.select('#svgCanvas'),    //  获取canvas的上下文    canvasCtx = canvas.getContext('2d'),    datas = [[10, 10],[50, 10], [100, 60], [150, 15], [200, 55], [250, 60], [300, 80], [350, 50], [400, 70]];//  创建线性路径生成器var lineCreator = d3.line()                .x(function(d){                    return d[0];                })                .y(function(d) {                    return d[1];                })                .curve(d3.curveBasis);/**  * 在HTML5的canvas元素中绘制  */function drawInCanvas() {    //  设置线的宽度      canvasCtx.lineWidth = 2;    //  设置线的颜色    canvasCtx.strokeStyle = 'blue';    //  设置绘制的上下文    lineCreator.context(canvasCtx);    //  设置数据    lineCreator(datas);    //  绘制路径    canvasCtx.stroke();}/**  * 在SVG元素中绘制  */function drawInSvg() {    //  必须要将上下文置空    lineCreator.context(null);    //  添加路径元素    svgCtx.append('path')           .attr('d', lineCreator(datas))           .attr('stroke-width', '2px')           .attr('stroke', 'blue')           .attr('fill', 'none')}//  在Canvas元素中绘制drawInCanvas();//  在SVG元素中绘制drawInSvg();

• 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

最后将在canvas与SVG中生成同样的曲线，如下图。