Canvas图例学习

发表于 2016年07月22日 · 归类于技术 · 阅读完需 5 分钟 ·

（1）基础示例1

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            var gnt1 = cans.createLinearGradient(10,0,390,0);
            gnt1.addColorStop(0,'#ff0000');
            gnt1.addColorStop(0.33,'#00ff00');
            gnt1.addColorStop(0.67,'#0000ff');
            gnt1.addColorStop(1,'#ff0000');
            cans.fillStyle = gnt1;
            cans.fillRect(10,10,380,280);
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>

（6）画sinx的图像

function $$(id){
    return document.getElementById(id);
}
function pageLoad(){
    var can = $$('can');
    var ctx = can.getContext('2d');
    for(var x=0.5;x< 1200;x += 10){
        ctx.moveTo(x,0);
        ctx.lineTo(x,600);
    }
    for(var y=0.5;y< 480;y += 10){
        ctx.moveTo(0,y);
        ctx.lineTo(1200,y);
    }
    ctx.strokeStyle='#bbb';
    ctx.stroke();
    //x轴
    ctx.beginPath();
    ctx.moveTo(0,240);
    ctx.lineTo(1180,240);
    ctx.moveTo(1175,235);
    ctx.lineTo(1180,240);
    ctx.lineTo(1175,245);
    ctx.fillText('X',1175,225);
    ctx.strokeStyle = "#f00";
    ctx.lineWidth = 2;
    for(var x=0;x< 1200;x += 100){
        ctx.moveTo(x,235);
        ctx.lineTo(x,240);
        ctx.fillText('' + x, x + 3,250);
    }
    ctx.stroke();
    //画曲线 sin曲线
    ctx.beginPath();
    ctx.moveTo(0,240);
    for(var x=0;x< 1151 ;x+=1){
        ctx.lineTo(x,-220*Math.sin(  x * Math.PI/100)+240);
    }
    ctx.strokeStyle = "#FF0000";
    ctx.lineWidth = 1;
    ctx.stroke();
}

请访问https://file.fe80.cn/查看效果