自学Canvas画布随笔

一、Canvas能做什么?

　　canvas是HTML5中的新元素，可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。如果我们掌握了完整的命令，我们可以用canvas创建丰富的web应用程序。如果我们想很好的使用canvas，我们首先应该很好的掌握javascript。

这篇文章是一篇基础教程，能了解一些设计方法。比如用HTML5 canvas 进行图形设计。

二、用HTML5 canvas设计

　　设计和开发一个web页面会包含很多的内容，用户首先需要有一个支持HTML canvas的浏览器。

　　首先，创建一个HTML5文档页面，设置document type是HTMl5的；

　　其次，在页面body区域添加一个canvas标签：

　　再次，给这个canvas定义一个id属性，这样方便我们在js中调用它。添加一个宽和高属性，在canvas标签中添加一个当浏览器不支持的时候显示给用户的内容。下面是列子代码：

<body>
    <canvas id="canvas" width="1024" height="768"   style="display: block;margin: 0 auto;">
        当前浏览器不支持Canvas ， 请更换浏览器！
    </canvas>
</body>

　　现在我们创建了一个包含HTML5 canvas 元素的空白画布，我们将使用js和canvas元素的方法来创建我们的图像。

　　添加一个javascript用HTMl5 canvas的方法：

<script type="text/javascript">
    var canvas = document.getElementById("canvas");
        
     // canvas 方法
    canvas.width = 1024;
    canvas.height = 768;
        
    var context = canvas.getContext("2d");   // 使用context进行 2D绘图  
    if(canvas.getContext == undefined){        
        console.log("当前浏览器不支持Canvas，请更换浏览器！");
        } //不支持的浏览器为undefined        
        
</script>

　　使用javascript来创建画布，可以使用矩形、圆圈和三角形,并使用线、幻灯片和渐变来创建我们的设计。
下面是完成的代码：

 // 画一个实心三角形        
    context.beginPath();
    context.moveTo(100,100);
    context.lineTo(700,700);
    context.lineTo(100,700);
    context.lineTo(100,100);
    context.closePath();
        
    context.lineWidth = 5;   // 线条宽度
        
    context.strokeStyle = "green";
    context.stroke();     // 绘制线条
        
    context.fillStyle = "red";   //  填充颜色 实心
    context.fill();

// 画一条直线
    context.beginPath();
    context.moveTo(200,100);
    context.lineTo(700,600);    
    context.closePath();
        
    context.strokeStyle = "black";
    context.stroke();

    // 画一组弧线    
        context.lineWidth = 5;
        context.strokeStyle = "#005588";        
        
        for(var i = 0;i < 10 ;i++){
            context.beginPath();
            context.arc(50+ i*100 , 60 , 40 , 0 , 2*Math.PI*(i+1)/10 , false );    
            context.closePath();
            
            context.stroke();            
        }
        
        for(var i = 0;i < 10 ;i++){
        context.beginPath();
        context.arc(50+ i*100 , 200 , 40 , 0 , 2*Math.PI*(i+1)/10 , false );    
//        context.closePath();

        context.stroke();        
        }
        
        for(var i = 0;i < 10 ;i++){
        context.beginPath();
        context.arc(50+ i*100 , 340 , 40 , 0 , 2*Math.PI*(i+1)/10 , true );    
//      context.closePath();
        
        context.stroke();            
        }
        
        context.fillStyle = "#005588";
        for(var i = 0;i < 10 ;i++){
        context.beginPath();
        context.arc(50+ i*100 , 480 , 40 , 0 , 2*Math.PI*(i+1)/10 , false );    
//      context.closePath();
        
        context.fill();   //  closePath()对fill函数没有，当调用fill函数时，canvas会自动将没有封闭的路径 收尾相连之后再进行填充
        context.stroke();            
        }

　　我们可以将上面的代码加入window.onload，或者jQuery的ready方法里，当文档加载完，将会创建文明的图形。

三、一些HTML5 canvas 图像解决方案（附链接）

　　用与HTML5 Canvas元素你可以开发动态绘图对象比如如可视化信息或数据图。HTML5 canvas 可以在javascript的帮助下很容易的绘制二维图形。让我们来看一下HTML5 canvas元素的一些数据图应用。

　　1. HumbleFinance

　　HumbleFinance是用js开发的一个开源的数据可视化图表，它用HTML5 canvas生成可视化图表数据，它可以用一个轴来展示任何两个二维的数据集。

　　地址： http://www.humblesoftware.com/finance/index

　　2.Graphr

　　Graphr是一个用HTML5 canvas写的一个计算器应用，有每个图像计算器应有的基本功能。

　　地址：http://www.graphr.org/

　　3.用HTML5和jQuery创建的华丽的动画饼图

　　我们可以用javascript和HTML5来创建一个交互式饼图，有华丽的动画效果。这在之前只能用flash来完成，现在也可以使用最新的HTML5技术了。

　　地址：http://cyberpython.github.com/AwesomeChartJS/

　　4. AwesomeJS

　　AwesomeJS 能够让你创建简单有用的图表，而仅需几行代码即可。这是一个基于HTML5和canvas的javascript库。

　　地址：http://cyberpython.github.com/AwesomeChartJS/

　　5.Ticker Plot（股票图）

　　Ticker Plot（股票图）是每一个在工作是使用图标的web开发人员都必备的一个图表工具。这是一个开源的项目，它使用HTML5 canvas在画布上绘制图形符号和鼠标事件。　　

　　Ticker Plot（股票图）是专门为股票行情和技术分析设计的。

四、绚丽的倒计时效果Canvas绘图与动画效果。

　　1、倒计时计数的基本架构

HTML代码

<body>
    <canvas id="canvas"  style=" display: block;margin: 0 auto;">
        当前浏览器不支持Canvas ， 请更换浏览器！
    </canvas>    
        
    <script type="text/javascript" src="js/digit.js"></script>  <!--数字1-9 加上：的点阵图-->
    <script type="text/javascript" src="js/countdown.js"></script>  <!--实现倒计时的主逻辑文件-->                
</body>

countdown.js代码（不涉及具体逻辑，具体倒计时逻辑下次更新）

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;

window.onload = function(){
    
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;
    
    render( context );
}

function render( cxt ){
    
    var hours = 12;
    var minute = 36;
    var second = 59;
    // 小时
     renderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt ); 
     // 每个字水平位置7直径,7*2 = 14半径+1 = 15     
     renderDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours%10) , cxt );
    
     // 冒号 （4*2+1）= 9  digit.js中 10代表 ：
     renderDigit( MARGIN_LEFT+ 30*(RADIUS+1) , MARGIN_TOP , 10 , cxt );
    // 分钟 
      renderDigit( MARGIN_LEFT+ 39*(RADIUS+1) , MARGIN_TOP , parseInt(minute/10) , cxt );
        renderDigit( MARGIN_LEFT+ 54*(RADIUS+1) , MARGIN_TOP , parseInt(minute%10) , cxt );
    
     // 冒号 （4*2+1）= 9  digit.js中 10代表 ：
     renderDigit( MARGIN_LEFT+ 69*(RADIUS+1) , MARGIN_TOP , 10 , cxt );
    // 秒
      renderDigit( MARGIN_LEFT+ 78*(RADIUS+1) , MARGIN_TOP , parseInt(second/10) , cxt );
        renderDigit( MARGIN_LEFT+ 93*(RADIUS+1) , MARGIN_TOP , parseInt(second%10) , cxt );    
}

function renderDigit(x , y , num , cxt){
    
    cxt.fillStyle = "#005588";
    for (var i = 0 ; i < digit[num].length ;i++) {
        for (var j = 0 ; j < digit[num][i].length ;j++){
        
                if(digit[num][i][j] == 1){
                    
                    cxt.beginPath();
                    // 圆心位置公式
                    cxt.arc( x+j * 2 * (RADIUS+1) + (RADIUS+1) ,  y+i * 2 * (RADIUS+1) + (RADIUS+1) , RADIUS , 0 , 2*Math.PI );
                    cxt.closePath();
                                        
                    cxt.fill();                
            }            
        }        
    }            
}

效果如下：

　　这部分目前正在学习中，后续学习会继续与大家探讨。蟹蟹，请多指教。

另附digit.js代码

digit =
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0]
        ]//:
    ];

自学Canvas画布 随笔

自学Canvas画布随笔