自学Canvas画布 随笔

Posted Tracey_W

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自学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画布 随笔的主要内容,如果未能解决你的问题,请参考以下文章

如何删除画布周围的灰色边框

Javascript Canvas +对象/功能

canvas 画布与画布内容都缩小如何实现?

canvas画布不显示

如何在固定的canvas画布内缩放

js 外部按钮点击事件与canvas画布里的线条鼠标事件冲突