Canvas 入门案例

1. canvas 圆形绘制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas圆形绘制</title>

    <style>
        * {
            margin: 0;
        }

        #canvas {
            display: block;
            margin: 50px auto;
            background-color: #ffffff;
        }
    </style>
</head>
<body bgcolor="black">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
<script>
    var cxt = canvas.getContext('2d');//画笔

    var color = cxt.createLinearGradient(0, 200, 0, 300);
    color.addColorStop(0, 'pink');
    color.addColorStop(1, 'red');
    cxt.shadowColor = 'red';
    cxt.shadowOffsetX = 1;
    cxt.shadowOffsetY = 1;
    cxt.shadowBlur = 50;//模糊度

    cxt.save();//保存路径
    cxt.fillStyle = color;//填充颜色
    cxt.beginPath();//开始路径
    cxt.arc(250, 250, 50, 0, Math.PI * 2, false);//绘制圆(x,y,r,0deg,360deg,false/true);
    cxt.closePath();//闭合路径
    cxt.fill();//填充方法
    cxt.restore();//释放路径
</script>
</html>
View Code