Canvas学习

//获取
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle = "rgba(0, 0, 200, 0.4)";//填充颜色
ctx.strokeStyle = "red";//边框颜色
ctx.fill();
ctx.stroke();

ctx.beginPath();//开始绘制
ctx.moveTo(0,0);//点
ctx.lineTo(461,0);//线
//圆心x，y，半径，开始角度，结束角度，顺时针
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

QQ图片20180428105638.png

<canvas id="myCanvas" width="500" height="900" style=""></canvas>
    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.fillStyle = "rgba(0, 0, 200, 0.4)";
        ctx.beginPath();
        ctx.moveTo(40,0);
        ctx.lineTo(501,0);
        ctx.lineTo(501,844);
        ctx.lineTo(95,844 );
        ctx.lineTo(40,798);
        ctx.lineTo(40,0);
        ctx.fill();
        
        ctx.fillStyle = "rgba(200, 0, 0, 0.4)";
        ctx.strokeStyle = "red";
        ctx.beginPath();
        ctx.moveTo(48,8);
        ctx.lineTo(488,8);
        ctx.lineTo(488,851);
        ctx.lineTo(90,851 );
        ctx.lineTo(48,814);
        ctx.lineTo(48,8);
        
        ctx.fill();
        ctx.stroke();


        ctx.fillStyle = "rgba(200, 0, 0, 0.4)";
        ctx.strokeStyle = "red";
        ctx.beginPath();
        ctx.moveTo(0,331);
        ctx.lineTo(40,311);
        ctx.lineTo(40,533);
        ctx.lineTo(0,513);
        ctx.lineTo(0,331);
        ctx.fill();
        ctx.stroke();
    </script>

QQ图片20180428105722.png

    <canvas id="myCanvas" width="180" height="50" style=""></canvas>
    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.fillStyle = "rgba(69, 158, 158, 0.4)";
        ctx.strokeStyle = "rgba(67, 182, 182, 0.4)";
        ctx.beginPath();
        ctx.moveTo(8,0);
        ctx.lineTo(50,0);
        ctx.lineTo(60,10);
        ctx.lineTo(120,10);
        ctx.lineTo(130,0);
        ctx.lineTo(172,0);
        ctx.lineTo(180,8);
        ctx.lineTo(180,50);
        ctx.lineTo(0,50);
        ctx.lineTo(0,8);
        ctx.lineTo(8,0);
        ctx.fill();
        ctx.stroke();
        
        var grd=ctx.createRadialGradient(90,25,10,90,60,100);
        grd.addColorStop(0,"rgba(0, 129, 201, 0.8)");
        grd.addColorStop(0.32,"rgba(59, 184, 211, 0.8)");
        grd.addColorStop(0.44,"rgba(80, 203, 214, 0.7)");
        grd.addColorStop(0.55,"rgba(74, 129, 201, 0.8)");
        grd.addColorStop(0.68,"rgba(56, 125, 130, 0.48)");
        grd.addColorStop(1,"rgba(25, 25, 21, 0.48)");
        ctx.fillStyle = grd;
        ctx.strokeStyle = "rgba(67, 182, 182, 0.4)";
        ctx.beginPath();
        ctx.moveTo(8,4);
        ctx.lineTo(50,4);
        ctx.lineTo(60,14);
        ctx.lineTo(120,14);
        ctx.lineTo(130,4);
        ctx.lineTo(172,4);
        ctx.lineTo(176,8);
        ctx.lineTo(176,46);
        ctx.lineTo(4,46);
        ctx.lineTo(4,8);
        ctx.lineTo(8,4);
        ctx.fill();
        ctx.stroke();

        ctx.fillStyle = "#459e9e";
        ctx.strokeStyle = "#43b6b6";
        ctx.beginPath();
        ctx.moveTo(53,0);
        ctx.lineTo(127,0);
        ctx.lineTo(120,8);
        ctx.lineTo(60,8);
        ctx.lineTo(53,0);
        ctx.fill();
        ctx.stroke();

Canvas学习

推荐阅读更多精彩内容