canvas矩形和圆形

作者: 最帅的坏兔子 | 来源:发表于2018-11-27 23:24 被阅读6次

<!DOCTYPE html>
<html>
<head>
    <title>Canvas</title>
</head>
<body>
    <canvas id="demo" width="600" height="600"></canvas>
    <script type="text/javascript">
        (function(){
            var canvas = document.getElementById('demo');//获取画布
            canvas.style.border = '1px solid red';  //画布边框
            var ctx = canvas.getContext('2d');//获取画布内容，设置画笔
            //矩形
            ctx.strokeRect(100,100,50,50);  //描边矩形
            ctx.fillRect(200,100,50,50);    //填充矩形
            ctx.fillRect(300,100,50,50);    //填充矩形
            ctx.clearRect(310,100,50,50);   //清楚矩形区域内容
            //圆
            ctx.beginPath();
            ctx.moveTo(300,300);
            ctx.arc(300,300,100, 0*Math.PI/180, 360*Math.PI/180,false);
            //ctx.arc(300,300,100, 0*Math.PI/180, 30*Math.PI/180,true);//反向
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }());
        
    </script>
</body>
</html>

描边矩形、填充矩形、矩形清除区域和圆.png