HTML5之canvas-1画布矩形

最新推荐文章于 2022-07-15 17:34:24 发布

weixin_30723433

最新推荐文章于 2022-07-15 17:34:24 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Abner5/p/5843963.html

本文介绍如何使用HTML5的Canvas API绘制矩形，包括设置填充颜色和边框样式。通过简单的JavaScript代码实现不同样式的矩形绘制，适用于初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绘制步骤

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