首页 > 代码库 > HTML5之canvas-1画布矩形

HTML5之canvas-1画布矩形

2024-08-12 05:06:59   219人阅读

绘制步骤

获取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>

 

HTML5之canvas-1画布矩形


联系
我们