Canvas的画笔工具——CanvasRenderingContext2D对象为绘制矩形提供了专用的方法。
rect(x, y, width, height);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas绘制矩形入门示例</title>
</head>
<body>
<!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas>
<script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
//开始一个新的绘制路径
ctx.beginPath();
//设置线条颜色为蓝色
ctx.strokeStyle = "blue";
//以canvas中的坐标点(10,10)作为绘制起始点，绘制一个宽度为80px、高度为50px的矩形
ctx.rect(10, 10, 80, 50);
//按照指定的路径绘制直线
ctx.stroke();
//关闭绘制路径
ctx.closePath();
}
</script>
</body>
</html>
对应的矩形效果显示如下
相关推荐
### JavaScript与Canvas绘制矩形的方法 #### 一、引言 在现代Web开发中，`HTML5 Canvas`作为一项重要的技术，为开发者提供了强大的绘图功能。通过JavaScript与Canvas的结合，开发者可以在网页上实现丰富的视觉效果...
在这个专题里，我们将专注于如何使用canvas绘制矩形，这在创建各种用户界面、数据可视化或游戏场景时都非常有用。 首先，我们需要在HTML页面中声明一个canvas元素。例如： ```html <canvas id="myCanvas" width=...
这里，`drawType`用于区分绘制矩形还是多边形，`isDrawing`标记当前是否在绘制，`startPoint`和`currentPoint`记录鼠标的起始位置和当前位置，`polygonPoints`则用于存储多边形的顶点。 接下来，我们需要监听鼠标...
以上就是微信小程序中使用Canvas绘制矩形、椭圆、直线和文字的基本操作。在实际开发中，还可以结合动画、事件处理等，创建出更加复杂和交互式的图形界面。记得在完成绘制后，使用`wx.canvasToTempFilePath()`方法将...
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中使用InkCanvas控件来绘制矩形和椭圆。InkCanvas是WPF提供的一种用于手写和绘图的控件，它允许用户使用鼠标或触笔进行自由绘画，并且支持...
本文实例讲述了js+canvas绘制矩形的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
在Vue.js中使用HTML5 Canvas元素进行图形绘制时，可能会遇到一些性能问题，尤其是在动态绘制如矩形等形状时。由于Canvas的特性，每次绘制都会覆盖原有内容，如果频繁进行清空（clearRect）和重新绘制，就可能导致...
在这个场景中，我们关注的是如何利用Canvas来根据鼠标的移动实时绘制矩形。这涉及到几个关键的知识点，包括Canvas的基本使用、鼠标事件监听以及动态图形的绘制。 首先，Canvas是HTML5新增的一个元素，它提供了一个...
基于canvas的鼠标绘制矩形框的demo，多个canvas对象下支持选中，平移，删除操作，代码用VUE实现的
Canvas是Android系统提供的一个用于绘制2D图形的对象，它可以对Bitmap进行操作，比如画线、画圆、画矩形等。在Android中，我们可以通过重写View的`onDraw()`方法来利用Canvas进行自定义绘图。 要将矩形图片变为圆角...
html5 canvas绘制矩形和圆形的实例代码 JavaScript Code复制内容到剪贴板 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> </head> ...
在微信小程序中绘制圆角矩形，可以通过调用Canvas绘图上下文（Context）的`arc`方法来绘制四个圆弧，并使用`lineTo`方法来绘制矩形的四条边。这个过程通常需要先设置好路径起点，然后通过一系列的路径绘制命令（如`...
Vue使用鼠标在Canvas上绘制矩形 本文实例为大家分享了Vue使用鼠标在Canvas上绘制矩形的具体代码，供大家参考，具体内容如下 1.代码 <template> ;"> <canvas id="myCanvas" ref="myCanvas" width="460" height...
这篇博客"canvas画矩形（包括渐变）"探讨了如何使用Canvas API来绘制矩形，并且介绍了如何创建和应用线性渐变效果。在本文中，我们将深入探讨这些概念，以帮助你更好地理解和运用它们。 首先，Canvas API提供了两个...
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现动态绘制矩形以及允许用户通过拖动矩形的四个角来调整其大小的功能。这个功能在各种图形编辑工具或界面设计应用中非常常见，它能提供...
首先，我们来看"vue+canvas绘制图形"这个主题。Vue组件是Vue.js的核心特性之一，它允许我们将UI拆分成独立、可复用的部分。在这个项目中，我们可以创建一个名为`Canvas.vue`的Vue组件，专门负责处理Canvas元素。在`...