基于HTML5 Canvas的线性区域图表教程,html5canvas

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

基于HTML5 Canvas的线性区域图表教程,html5canvas

之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的。今天我们来介绍一款基于HTML5
Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的形式展现,各个数据之间形成的区域用不同的颜色表示,具体可以看下面的DEMO演示。

图片 1

你也可以在这里查看在线演示

下面我们来简单介绍一下实现这款HTML5图表的过程以及源代码。

在今天的HTML教程里,我们要学习一下如何使用HTML5
Canvas实现一个超酷而又简单的网络画板功能。在这个教程中,我们可以选择笔刷的类型、笔刷的大小以及笔刷的颜色,当然作为画板还需要很多功能,这里只是最基本的绘制功能,大家可以自己实现类似矩形、椭圆等复杂元素的绘制。

HTML代码:

<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

简单的一个canvas标签,我们的图表就是在canvas上绘制而成的。

由于这款图表是基于RGraph的,所以我们还要引用RGraph的相关js脚本以及jquery类库:

<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.common.effects.js" ></script>
<script src="../libraries/RGraph.common.dynamic.js" ></script>
<script src="../libraries/RGraph.common.tooltips.js" ></script>
<script src="../libraries/RGraph.drawing.poly.js" ></script>
<script src="../libraries/RGraph.line.js" ></script>
<script src="../libraries/jquery.min.js" ></script>

图片 2

最后是Javascript代码:

var d1  = [];
            var d2  = [];
            var val = 47;

            // Create the data
            for (var i=0; i<100; i+=1) d1[i] = RGraph.random(45,55);
            for (var i=0; i<100; i+=1) d2[i] = RGraph.random(25,35);


            var line = new RGraph.Line('cvs', d1, d2)
                .Set('background.grid.autofit.numhlines', 10)
                .Set('hmargin', 10)
                .Set('filled', true)
                .Set('fillstyle', 'red')
                .Set('filled.range', true)
                .Set('filled.range.threshold',40)
                .Set('filled.range.threshold.colors', ['rgba(255,0,0,0.5)', 'rgba(0,0,255,0.5)'])
                .Set('labels',['Q1','Q2','Q3','Q4'])
                .Set('colors', ['gray', 'gray'])
                .Set('numxticks', 8)
                .Set('linewidth', 1)
                .Set('ymax', 60)
            RGraph.Effects.Line.jQuery.Trace(line);

            var coords = []
            for (var i=0; i<(line.coords.length/2); i+=1) {
                coords.push(line.coords[i])
            }
            for (var i=(line.coords.length - 1); i>=(line.coords.length/2); i-=1) {
                coords.push(line.coords[i])
            }

            var poly = new RGraph.Drawing.Poly('cvs', coords)
                .Set('fillstyle', 'rgba(0,0,0,0)')
                .Set('strokestyle', 'rgba(0,0,0,0)')
                .Set('tooltips', ['The range chart'])
                .Set('highlight.fill', 'rgba(255,255,255,0.3)')
                .Draw();

主要是初始化一些数据,RGraph是一款很不错的HTML5图表框架,更多的RGraph例子我们今后会继续讲解。源代码下载>>

你也可以再这里查看DEMO演示

您好,教您一个html5 canvas的问题: 我在canvas中画了多个图形,有图像(image)、直线

canvas可以实现
首先canvas要响应鼠标事件(onmousedown之类)
之后所有的图形必须要创建相应的对象,来记录他们所在的位置以及大小还有zOrder(层叠位置,在2个对象重叠的时候决定谁在上面),相应的对象放到一个数组里并按zOrder排序
当canvas的鼠标click事件触发后,按照zOrder的顺序来检测鼠标坐标在不在某个对象的区域里,如果在,则执行相应的函数
 

下面我们来简单地分析一下实现这个HTML5网页画板的原理及代码,代码由HTML以及Javascript组成,主要还是Javascript代码。

怎使用html5的canvas 做一个曲线图 附小例子

<!DOCTYPE HTML><html><title>canvas
test</title><head><style>#canvas{ width:800px;
height:800px; box-shadow: 0px 0px 10px rgba(0, 0, 0, .8); margin: 10px
10px;}</style></head><body> <canvas id=’canvas’
width=800
height=800>unsupport</canvas></body><script>window.onload
= function(){ var canvas = document.getElementById(‘canvas’); var ctx =
canvas.getContext(‘2d’); ctx.strokeColor = ‘black’; ctx.lineWidth = 3;
ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 5; ctx.shadowBlur = 2;
ctx.shadowColor = ‘rgba(0, 0, 0, 0.5)’; ctx.save(); ctx.translate(100,
100); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(400, 0);
ctx.moveTo(0, 0); for(var i = 0; i < 20; i += 0.1){ var x = i * 20;
var y = Math.sin(i) * 20; ctx.lineTo(x, y); } ctx.stroke();
ctx.restore(); ctx.save(); ctx.translate(100, 200); ctx.beginPath();
ctx.moveTo(0, 0); ctx.lineTo(400, 0); ctx.moveTo(0, 0);
ctx.quadraticCurveTo(150, -100, 200, 0); ctx.quadraticCurveTo(250, 200,
400, 0); ctx.stroke(); ctx.restore(); ctx.save(); ctx.translate(100,
400); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(400, 0);
ctx.moveTo(0, 0); ctx.bezierCurveTo(50, 0, 100, -50, 150, -100);
ctx.bezierCurveTo(175, -75, 150, -25, 100, 0); ctx.bezierCurveTo(300,
-75, 600, -……余下全文>>
图片 3
 

Canvas的线性区域图表教程,html5canvas
之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的。今天我们来介绍一款基于…

HTML代码:

<div style="width:530px;margin:10px auto">
    <div id="canvasDiv"></div>
</div>

HTML代码非常简单,仅仅是构造了一个canvas容器,我们的画板就在这个地方生成。

Javascript代码:

首先我们通过一组变量来定义画板的样式,以及一些数据的初始化:

var canvas;
var context;
var canvasWidth = 490;
var canvasHeight = 220;
var padding = 25;
var lineWidth = 8;
var colorPurple = "#cb3594";
var colorGreen = "#659b41";
var colorYellow = "#ffcf33";
var colorBrown = "#986928";
var outlineImage = new Image();
var crayonImage = new Image();
var markerImage = new Image();
var eraserImage = new Image();
var crayonBackgroundImage = new Image();
var markerBackgroundImage = new Image();
var eraserBackgroundImage = new Image();
var crayonTextureImage = new Image();
var clickX = new Array();
var clickY = new Array();
var clickColor = new Array();
var clickTool = new Array();
var clickSize = new Array();
var clickDrag = new Array();
var paint = false;
var curColor = colorPurple;
var curTool = "crayon";
var curSize = "normal";
var mediumStartX = 18;
var mediumStartY = 19;
var mediumImageWidth = 93;
var mediumImageHeight = 46;
var drawingAreaX = 111;
var drawingAreaY = 11;
var drawingAreaWidth = 267;
var drawingAreaHeight = 200;
var toolHotspotStartY = 23;
var toolHotspotHeight = 38;
var sizeHotspotStartY = 157;
var sizeHotspotHeight = 36;
var sizeHotspotWidthObject = new Object();
sizeHotspotWidthObject.huge = 39;
sizeHotspotWidthObject.large = 25;
sizeHotspotWidthObject.normal = 18;
sizeHotspotWidthObject.small = 16;
var totalLoadResources = 8;
var curLoadResNum = 0;

接下来开始准备画布,也就是初始化Canvas对象:

function prepareCanvas()
{
    // Create the canvas (Neccessary for IE because it doesn't know what a canvas element is)
    var canvasDiv = document.getElementById('canvasDiv');
    canvas = document.createElement('canvas');
    canvas.setAttribute('width', canvasWidth);
    canvas.setAttribute('height', canvasHeight);
    canvas.setAttribute('id', 'canvas');
    canvasDiv.appendChild(canvas);
    if(typeof G_vmlCanvasManager != 'undefined') {
        canvas = G_vmlCanvasManager.initElement(canvas);
    }
    context = canvas.getContext("2d"); // Grab the 2d canvas context
    // Note: The above code is a workaround for IE 8 and lower. Otherwise we could have used:
    //     context = document.getElementById('canvas').getContext("2d");

    // Load images
    // -----------
    crayonImage.onload = function() { resourceLoaded(); 
    };
    crayonImage.src = "images/crayon-outline.png";
    //context.drawImage(crayonImage, 0, 0, 100, 100);

    markerImage.onload = function() { resourceLoaded(); 
    };
    markerImage.src = "images/marker-outline.png";

    eraserImage.onload = function() { resourceLoaded(); 
    };
    eraserImage.src = "images/eraser-outline.png";    

    crayonBackgroundImage.onload = function() { resourceLoaded(); 
    };
    crayonBackgroundImage.src = "images/crayon-background.png";

    markerBackgroundImage.onload = function() { resourceLoaded(); 
    };
    markerBackgroundImage.src = "images/marker-background.png";

    eraserBackgroundImage.onload = function() { resourceLoaded(); 
    };
    eraserBackgroundImage.src = "images/eraser-background.png";

    crayonTextureImage.onload = function() { resourceLoaded(); 
    };
    crayonTextureImage.src = "images/crayon-texture.png";

    outlineImage.onload = function() { resourceLoaded(); 
    };
    outlineImage.src = "images/watermelon-duck-outline.png";

    // Add mouse events
    // ----------------
    $('#canvas').mousedown(function(e)
    {
        // Mouse down location
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;

        if(mouseX < drawingAreaX) // Left of the drawing area
        {
            if(mouseX > mediumStartX)
            {
                if(mouseY > mediumStartY && mouseY < mediumStartY + mediumImageHeight){
                    curColor = colorPurple;
                }else if(mouseY > mediumStartY + mediumImageHeight && mouseY < mediumStartY + mediumImageHeight * 2){
                    curColor = colorGreen;
                }else if(mouseY > mediumStartY + mediumImageHeight * 2 && mouseY < mediumStartY + mediumImageHeight * 3){
                    curColor = colorYellow;
                }else if(mouseY > mediumStartY + mediumImageHeight * 3 && mouseY < mediumStartY + mediumImageHeight * 4){
                    curColor = colorBrown;
                }
            }
        }
        else if(mouseX > drawingAreaX + drawingAreaWidth) // Right of the drawing area
        {
            if(mouseY > toolHotspotStartY)
            {
                if(mouseY > sizeHotspotStartY)
                {
                    var sizeHotspotStartX = drawingAreaX + drawingAreaWidth;
                    if(mouseY < sizeHotspotStartY + sizeHotspotHeight && mouseX > sizeHotspotStartX)
                    {
                        if(mouseX < sizeHotspotStartX + sizeHotspotWidthObject.huge){
                            curSize = "huge";
                        }else if(mouseX < sizeHotspotStartX + sizeHotspotWidthObject.large + sizeHotspotWidthObject.huge){
                            curSize = "large";
                        }else if(mouseX < sizeHotspotStartX + sizeHotspotWidthObject.normal + sizeHotspotWidthObject.large + sizeHotspotWidthObject.huge){
                            curSize = "normal";
                        }else if(mouseX < sizeHotspotStartX + sizeHotspotWidthObject.small + sizeHotspotWidthObject.normal + sizeHotspotWidthObject.large + sizeHotspotWidthObject.huge){
                            curSize = "small";                        
                        }
                    }
                }
                else
                {
                    if(mouseY < toolHotspotStartY + toolHotspotHeight){
                        curTool = "crayon";
                    }else if(mouseY < toolHotspotStartY + toolHotspotHeight * 2){
                        curTool = "marker";
                    }else if(mouseY < toolHotspotStartY + toolHotspotHeight * 3){
                        curTool = "eraser";
                    }
                }
            }
        }
        else if(mouseY > drawingAreaY && mouseY < drawingAreaY + drawingAreaHeight)
        {
            // Mouse click location on drawing area
        }
        paint = true;
        addClick(mouseX, mouseY, false);
        redraw();
    });

    $('#canvas').mousemove(function(e){
        if(paint==true){
            addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
            redraw();
        }
    });

    $('#canvas').mouseup(function(e){
        paint = false;
          redraw();
    });

    $('#canvas').mouseleave(function(e){
        paint = false;
    });
}

看起来很复杂,前面主要是初始化canvas的背景图片,后面主要是初始化画笔事件,像click、mouseup、mouseleave等鼠标事件。

下面是draw的主要方法:

function redraw()
{
    // Make sure required resources are loaded before redrawing
    if(curLoadResNum < totalLoadResources){ return; }

    clearCanvas();

    var locX;
    var locY;
    if(curTool == "crayon")
    {
        // Draw the crayon tool background
        context.drawImage(crayonBackgroundImage, 0, 0, canvasWidth, canvasHeight);

        // Purple
        locX = (curColor == colorPurple) ? 18 : 52;
        locY = 19;

        context.beginPath();
        context.moveTo(locX + 41, locY + 11);
        context.lineTo(locX + 41, locY + 35);
        context.lineTo(locX + 29, locY + 35);
        context.lineTo(locX + 29, locY + 33);
        context.lineTo(locX + 11, locY + 27);
        context.lineTo(locX + 11, locY + 19);
        context.lineTo(locX + 29, locY + 13);
        context.lineTo(locX + 29, locY + 11);
        context.lineTo(locX + 41, locY + 11);
        context.closePath();
        context.fillStyle = colorPurple;
        context.fill();    

        if(curColor == colorPurple){
            context.drawImage(crayonImage, locX, locY, mediumImageWidth, mediumImageHeight);
        }else{
            context.drawImage(crayonImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight);
        }

        // Green
        locX = (curColor == colorGreen) ? 18 : 52;
        locY += 46;

        context.beginPath();
        context.moveTo(locX + 41, locY + 11);
        context.lineTo(locX + 41, locY + 35);
        context.lineTo(locX + 29, locY + 35);
        context.lineTo(locX + 29, locY + 33);
        context.lineTo(locX + 11, locY + 27);
        context.lineTo(locX + 11, locY + 19);
        context.lineTo(locX + 29, locY + 13);
        context.lineTo(locX + 29, locY + 11);
        context.lineTo(locX + 41, locY + 11);
        context.closePath();
        context.fillStyle = colorGreen;
        context.fill();    

        if(curColor == colorGreen){
            context.drawImage(crayonImage, locX, locY, mediumImageWidth, mediumImageHeight);
        }else{
            context.drawImage(crayonImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight);
        }

        // Yellow
        locX = (curColor == colorYellow) ? 18 : 52;
        locY += 46;

        context.beginPath();
        context.moveTo(locX + 41, locY + 11);
        context.lineTo(locX + 41, locY + 35);
        context.lineTo(locX + 29, locY + 35);
        context.lineTo(locX + 29, locY + 33);
        context.lineTo(locX + 11, locY + 27);
        context.lineTo(locX + 11, locY + 19);
        context.lineTo(locX + 29, locY + 13);
        context.lineTo(locX + 29, locY + 11);
        context.lineTo(locX + 41, locY + 11);
        context.closePath();
        context.fillStyle = colorYellow;
        context.fill();    

        if(curColor == colorYellow){
            context.drawImage(crayonImage, locX, locY, mediumImageWidth, mediumImageHeight);
        }else{
            context.drawImage(crayonImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight);
        }

        // Yellow
        locX = (curColor == colorBrown) ? 18 : 52;
        locY += 46;

        context.beginPath();
        context.moveTo(locX + 41, locY + 11);
        context.lineTo(locX + 41, locY + 35);
        context.lineTo(locX + 29, locY + 35);
        context.lineTo(locX + 29, locY + 33);
        context.lineTo(locX + 11, locY + 27);
        context.lineTo(locX + 11, locY + 19);
        context.lineTo(locX + 29, locY + 13);
        context.lineTo(locX + 29, locY + 11);
        context.lineTo(locX + 41, locY + 11);
        context.closePath();
        context.fillStyle = colorBrown;
        context.fill();    

        if(curColor == colorBrown){
            context.drawImage(crayonImage, locX, locY, mediumImageWidth, mediumImageHeight);
        }else{
            context.drawImage(crayonImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight);
        }
    }
    else if(curTool == "marker")
    {
        // Draw the marker tool background
        context.drawImage(markerBackgroundImage, 0, 0, canvasWidth, canvasHeight);

        // Purple
        locX = (curColor == colorPurple) ? 18 : 52;
        locY = 19;

        context.beginPath();
        context.moveTo(locX + 10, locY + 24);
        context.lineTo(locX + 10, locY + 24);
        context.lineTo(locX + 22, locY + 16);
        context.lineTo(locX + 22, locY + 31);
        context.closePath();
        context.fillStyle = colorPurple;
        context.fill();    

        if(curColor == colorPurple){
            context.drawImage(markerImage, locX, locY, mediumImageWidth, mediumImageHeight);
        }else{
            context.drawImage(markerImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight);
        }

        // Green
        locX = (curColor == colorGreen) ? 18 : 52;
        locY += 46;

        context.beginPath();
        context.moveTo(locX + 10, locY + 24);
        context.lineTo(locX + 10, locY + 24);
        context.lineTo(locX + 22, locY + 16);
        context.lineTo(locX + 22, locY + 31);
        context.closePath();
        context.fillStyle = colorGreen;
        context.fill();    

        if(curColor == colorGreen){
            context.drawImage(markerImage, locX, locY, mediumImageWidth, mediumImageHeight);
        }else{
            context.drawImage(markerImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight);
        }

        // Yellow
        locX = (curColor == colorYellow) ? 18 : 52;
        locY += 46;

        context.beginPath();
        context.moveTo(locX + 10, locY + 24);
        context.lineTo(locX + 10, locY + 24);
        context.lineTo(locX + 22, locY + 16);
        context.lineTo(locX + 22, locY + 31);
        context.closePath();
        context.fillStyle = colorYellow;
        context.fill();    

        if(curColor == colorYellow){
            context.drawImage(markerImage, locX, locY, mediumImageWidth, mediumImageHeight);
        }else{
            context.drawImage(markerImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight);
        }

        // Yellow
        locX = (curColor == colorBrown) ? 18 : 52;
        locY += 46;

        context.beginPath();
        context.moveTo(locX + 10, locY + 24);
        context.lineTo(locX + 10, locY + 24);
        context.lineTo(locX + 22, locY + 16);
        context.lineTo(locX + 22, locY + 31);
        context.closePath();
        context.fillStyle = colorBrown;
        context.fill();    

        if(curColor == colorBrown){
            context.drawImage(markerImage, locX, locY, mediumImageWidth, mediumImageHeight);
        }else{
            context.drawImage(markerImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight);
        }
    }
    else if(curTool == "eraser")
    {
        context.drawImage(eraserBackgroundImage, 0, 0, canvasWidth, canvasHeight);
        context.drawImage(eraserImage, 18, 19, mediumImageWidth, mediumImageHeight);    
    }else{
        alert("Error: Current Tool is undefined");
    }

    if(curSize == "small"){
        locX = 467;
    }else if(curSize == "normal"){
        locX = 450;
    }else if(curSize == "large"){
        locX = 428;
    }else if(curSize == "huge"){
        locX = 399;
    }
    locY = 189;
    context.beginPath();
    context.rect(locX, locY, 2, 12);
    context.closePath();
    context.fillStyle = '#333333';
    context.fill();    

    // Keep the drawing in the drawing area
    context.save();
    context.beginPath();
    context.rect(drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
    context.clip();

    var radius;
    var i = 0;
    for(; i < clickX.length; i++)
    {        
        if(clickSize[i] == "small"){
            radius = 2;
        }else if(clickSize[i] == "normal"){
            radius = 5;
        }else if(clickSize[i] == "large"){
            radius = 10;
        }else if(clickSize[i] == "huge"){
            radius = 20;
        }else{
            alert("Error: Radius is zero for click " + i);
            radius = 0;    
        }

        context.beginPath();
        if(clickDrag[i] && i){
            context.moveTo(clickX[i-1], clickY[i-1]);
        }else{
            context.moveTo(clickX[i], clickY[i]);
        }
        context.lineTo(clickX[i], clickY[i]);
        context.closePath();

        if(clickTool[i] == "eraser"){
            //context.globalCompositeOperation = "destination-out"; // To erase instead of draw over with white
            context.strokeStyle = 'white';
        }else{
            //context.globalCompositeOperation = "source-over";    // To erase instead of draw over with white
            context.strokeStyle = clickColor[i];
        }
        context.lineJoin = "round";
        context.lineWidth = radius;
        context.stroke();

    }
    //context.globalCompositeOperation = "source-over";// To erase instead of draw over with white
    context.restore();

    // Overlay a crayon texture (if the current tool is crayon)
    if(curTool == "crayon"){
        context.globalAlpha = 0.4; // No IE support
        context.drawImage(crayonTextureImage, 0, 0, canvasWidth, canvasHeight);
    }
    context.globalAlpha = 1; // No IE support

    // Draw the outline image
    context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
}

其实HTML5说白了还是需要很多Javascript支持,不过Canvas非常不错,可以让你在上面自由地绘制图形和动画。这款基于HTML5
Canvas的网页画板就是一个很好的例子。源代码下载>>

发表评论

电子邮件地址不会被公开。 必填项已用*标注