利用 rect 方法绘制矩形
发布时间：2023-05-24 14:18:44 所属栏目：教程 来源：
导读：绘制矩形在 canvas 中是常用的方法，所以 canvas API 直接提供了一个封装好的绘制矩形的方法 rect()，这个方法接收4个参数 x，y，width，height。
先看整体案例：
<!DOCTYPE html>
<html>
<head>
<Meta
先看整体案例：
<!DOCTYPE html>
<html>
<head>
<Meta
|
绘制矩形在 canvas 中是常用的方法，所以 canvas API 直接提供了一个封装好的绘制矩形的方法 rect()，这个方法接收4个参数 x，y，width，height。 先看整体案例： <!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <title>网Wiki</title> <style> #imooc{ border:px solid #ccc; } </style> </head> <body> <canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas> <script> const canvas = document.getElementById('imooc'); const ctx = canvas.getContext('2d'); ctx.strokeStyle="blue"; ctx.linewidth=; ctx.rect(,,,); //调用了直接绘制矩形函数 ctx.stroke(); </script> </body> </html> 我们从案例中可以看到，绘制一个矩形路径只需要调用一个函数即可，和上节课的绘制案例比较，我们省去了连每一个点的步骤。这里需要注意 rect 方法只是帮我们绘制了路径，并不会把路径实际地显示到画布上，我们依然需要调用 stroke 描边方法才能看到绘制的图形。 （编辑：汽车网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
