HTML5之canvas-1画布矩形

绘制步骤

获取canvas对象

var oCanvas = document.getElementById("canvas");

取得上下文context

var context = oCanvas.getContext("2d");

绘制图形

根据需求选择方法

绘制长方形/边框/填充色彩

Context.lineWidth=1;

Context.fillRect(x,y,width,height);

Context.strokeRect(x,y,width,height);

<html>
    <head>
        <meta charset="UTF-8">
        <title>画布-矩形</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <body>
        <canvas id="canvas" width="500" height="500"></canvas>
        <script type="text/javascript">
        //必要的两个条件
        //1.获取canvas对象
        var oCanvas = document.getElementById("canvas");
        //2.取得上下文context
        var context = oCanvas.getContext("2d");
        
        //一.context做操作，绘制图形
        //1.颜色，css样式
        context.fillStyle= "#ededed";
        //2.起点终点宽度高度，执行，fillRect填充矩形，有填充
        context.fillRect(0,0,500,500);
        
        context.fillStyle = "red";
        context.fillRect(50,50,100,100);
        //边框，strokeRect无填充,strokeStyle默认黑色
        context.strokeStyle = '#40bfe0';
        context.lineWidth = '4';   //框的宽度，默认1
        context.strokeRect(50,50,100,100);
        
        </script>
    </body>
</html>