53、HTML5 Canvas绘图全解析

u8v9w0x1y

于 2025-07-31 13:04:58 发布

阅读量9

点赞数

CC 4.0 BY-SA版权

分类专栏： PHP、MySQL与JavaScript动态网站开发指南文章标签： HTML5 Canvas 绘图矩形

本文链接：https://blog.csdn.net/u8v9w0x1y/article/details/150122258

PHP、MySQL与JavaScript动态网站开发指南专栏收录该内容

62 篇文章 ¥399.00 ¥499.90

订阅专栏

超级会员免费看

HTML5 Canvas绘图全解析

1. 绘制矩形

在绘制仅带轮廓的矩形时，可使用如下命令，默认颜色为黑色，也可使用当前选定的描边颜色：

context.strokeRect(60, 60, 520, 120)

若要更改颜色，可先使用如下命令，提供任何有效的CSS颜色参数：

context.strokeStyle = 'green'

下面是一个结合上述命令绘制多个矩形的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Drawing Rectangles</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='640' height='240'></canvas>
    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'
      co

了解本专栏