我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

Canvas矩形API

Canvas的API提供了三个方法，分别用于矩形的清除、描边及填充。

矩形的清除、描边与填充

方法 描述 clearRect(double x,double y,double w,double h)

清除指定区域像素。前两个参数指位置，后两个参数指宽高。

所谓清除，是将其设置为全透明黑色。

strokeRect(double x,double y,double w,double h)

为矩形描边。

使用如下属性：

  • strokeStyle
  • lineWidth
  • lineJion
  • miterLimit

如果宽高其中一个为0，则不会绘制任何东西。

fillRect(double x,double y,double w,double h)

填充指定矩形。

如果宽高其中一个为0，则不会绘制任何东西。

 

演示程序

下面程序使用strokeRect()来绘制左边矩形，使用fillRect()来绘制右边矩形。

演示链接

https://827652549.github.io/Canvas/Unit2/Rectangle.html

效果图

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>矩形的绘制</title>
</head>
<body>
        <canvas id="canvas" width="700" height="500"></canvas>
</body>
<script>
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');

    context.lineJoin='round';
    context.lineWidth=30;

    context.font='24px Helvetica';
    context.fillText('点击任何处以擦除',175,40);

    context.strokeRect(75,100,200,200);
    context.fillRect(325,100,200,200);

    context.canvas.onmousedown=function (ev) {
        context.clearRect(0,0,canvas.width,canvas.height);
    }
</script>
</html>

 

Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区