Day06（HTML5 canvas画布 demo 帧动画）

作者: AnnQi | 来源:发表于2017-11-07 14:34 被阅读0次

Day06（HTML5 canvas画布 demo 帧动画）
HTML5 Canvas 完整测试 - canvas 标签
HTML5 Canvas粒子模拟效果
Canvas
Canvas2D画线和面
canvas基础入门实例
初识canvas(画布)
HTML5画布(CANVAS)速查简表
Android Canvas相关
web前端源码笔记_canvas【爱创课堂】

Canvas 画布

Canvas是一个矩形区域的画布，可以用javascript在上面画图，控制每一个像素；
要记住，canvas标签是使用javascript在网页上画图，本身不具备画图功能
Canvas：主要用于游戏
可视化数据、banner广告

未来：：可能性：模拟器、远程计算机控制、图形编辑器（PS）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="demo" width="600" height="600"></canvas><!--canvas标签的宽高，请在标签内进行设置，不要用CSS-->
    </body>
    <script type="text/javascript">
        /*第一步，获取canvas标签*/
        var can = document.getElementById("demo");
        can.style.border='1px solid red';
        can.width=600;
        can.height=600;
        /*canvas的宽高直接用width和height,千万别can.style.width*/
        
        
        /*第二步，获取canvas的上下文（也就是画布的工具栏）*/
        var ctx = can.getContext('2d');
        
        
        /*第三部：绘制*/
        /*画图，第一步，定位坐标点*/
        ctx.moveTo(100,100)//将画笔移动到100，100的坐标点
        ctx.lineTo(200,100)//将画笔从100,100水平移动到200,100的位置
        ctx.lineTo(100,200)//将画笔从200,100移动到100,200的位置
        
        /*闭合路径*/
        ctx.closePath()闭合路径
        
        //设置线宽
        ctx.lineWidth = 4;
        
        
        //设置描边
        ctx.strokeStyle = 'red';//设置描边样式
        ctx.stroke()//描边的意思
        
        
        //设置填充
        ctx.fillStyle = 'yellow';//设置填充样式
        ctx.fill();
    </script>
    
    
</html>

demo canvas画形状圆

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="can"></canvas>
    </body>
    <script type="text/javascript">
        (function(){
            var can = document.getElementById("can");
            var ctx = can.getContext('2d');
            can.width = 600;
            can.height = 600;
            can.style.border = '1px solid red';
            
            var data = [{
                'value':0.2,
                'color':'red'
            },{
                'value':0.3,
                'color':'yellow'
            }
            ,{
                'value':0.4,
                'color':'cyan'
            }
            ,{
                'value':0.1,
                'color':'blue'
            }];
            
            var ang = -90;//设置圆的初始角度
            
            var x0=300,y0=300;
            var radius = 200;
            
            for(var i = 0; i < data.length; i++){
                ctx.beginPath();//因为每个扇形属性都不同，所以每次开辟一个路径；
                ctx.moveTo(x0,y0);
                var angle = data[i].value*360;//定义扇形宽度（角度）
                ctx.fillStyle = data[i].color;
                /*设置扇形起点*/
                var startAng = ang*Math.PI/180;
                
                /*设置扇形的重点*/
                
                var endAng = (ang+angle)*Math.PI/180;
                
                ctx.arc(x0,y0,radius,startAng,endAng);
                ctx.fill();
                //把下个扇形的起点变成当前扇形的终点；
                ang+=angle;
            }
            
            
        }());
    </script>
</html>