canvas (1) 画一些简单的图形

最新推荐文章于 2024-08-13 12:49:55 发布

mx52jing

最新推荐文章于 2024-08-13 12:49:55 发布

阅读量1.2k

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/mx52jing/article/details/78806802

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

介绍

以下是引自于MDN的定义内容

canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。

canvas元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。

canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。canvas元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。

canvas标签通常情况下有3两个属性，id，width，height
在画图形时,坐标从左上角开始为(0,0),向右向下增大

<canvas id="demo" width="150" height="150">

// id 用来获取DOM元素
// width和height分别表示画布的宽度和高度
// canvas中，获取渲染上下文使用 getContext() 方法

例如：
	let canvas = document.getElementById('demo'),
		ctx = canvas.getContext('2d');

先画一个矩形

API

fillRect(x,y,width,height)

绘制一个填充的矩形。
x和y表示起始点的坐标位置，width表示绘制图形的宽度,height表示绘制图形的高度

strokeRect(x,y,width,height)

绘制一个只有边框的矩形(其实就是绘制边框，不填充)。
x和y表示起始点的坐标位置，width表示绘制图形的宽度,height表示绘制图形的高度

clearRect(x,y,width,height)

清除指定大小的填充内容(就是在填充矩形中清除一部分填充)
x和y表示起始点的坐标位置，width表示绘制图形的宽度,height表示绘制图形的高度

方形示例

代码和效果可在这里看

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    canvas {
      border:1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="suqare" width="150px" height="150px"></canvas>
  <script>
	 let canvas = document.getElementById('suqare'),
	     ctx = canvas.getContext('2d');
		 ctx.fillRect(10,10,130,130); // 绘制一个起点坐标(10,10,),宽高为130的填充矩形
		 ctx.clearRect(30,30,80,80); //  从(30,30,)开始,清除宽高为80的填充矩形
		 ctx.strokeRect(50,50,40,40); // 绘制一个起点坐标(50,50,),宽高为40的矩形边框
  </script>
</body>
</html>

效果图如下:
这里写图片描述

绘制路径

API

beginPath()

新建一条路径，可多次出现，每次都新开始一个绘画

moveTo(x,y)

新开始的路径的起点坐标

lineTo(x,y)

线条移动点到指定坐标

closePath()

闭合路径

fill()

填充绘制区域

stroke()

通过线条绘制轮廓(可以理解为绘制边框,不填充，与fill()相反)

画一个三角形

代码和效果可以在这里看

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas id="arrow" width="150" height="150"></canvas>
    <script>
        let canvas = document.getElementById('arrow');
            let ctx = canvas.getContext('2d');
            // 第一个三角形
            ctx.beginPath();
            ctx.moveTo(10,10);
            ctx.lineTo(30,30);
            ctx.lineTo(10,50);
            ctx.fill();
            // 第二个三角形
            ctx.beginPath();
            ctx.moveTo(140,10);
            ctx.lineTo(120,30);
            ctx.lineTo(140,50);
            ctx.closePath();
            ctx.stroke();
    </script>
</body>

</html>

效果图如下：
这里写图片描述

圆弧

API

beginPath()

新建一条路径，可多次出现，每次都新开始一个绘画

moveTo(x,y)

新开始的路径的起点坐标

arc(x,y,r,startDeg,endDeg,direction)

参数	描述
x，y	圆心坐标
r	圆的半径
startDeg，endDeg	开始和结束的弧度(开始一般为0，结束为Math.PI/Math.PI*2)
direction	true(逆时针)false(顺时针)，默认为false

画圆

代码和效果可以在这里看

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas id="circle" width="150" height="150"></canvas>
    <script>
        // beginPath() 新建一条路径，可多次出现，每次都新开始一个绘画
        // moveTo(x,y) 新开始的路径的起点坐标
        // arc(x,y,r,startDeg,endDeg,direction) 
            // x,y: 圆心坐标, 
            // r:半径, 
            // startDeg,endDeg:开始和结束的弧度, 
            // direction: true(逆时针), false(顺时针)
        window.onload = function () {
            let canvas = document.getElementById('circle')，
                ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(75,75,50,0,Math.PI*2, true);
            ctx.moveTo(50,50);
            ctx.arc(50,50,5,0,Math.PI*2, false);
            ctx.moveTo(100,50)
            ctx.arc(100,50,5,0,Math.PI*2, true);
            ctx.moveTo(75,95);
            ctx.arc(75,85,20,0,Math.PI, false);
            ctx.closePath();
            ctx.stroke();
        }
    </script>
</body>

</html>

效果如下:
这里写图片描述

画线

API

lineWidth

绘制的线条的粗细默认值是1

lineCap

线条两端点显示的样式默认是:butt，还有round和 square

属性	描述
butt	默认方形
butt	两端添加半径为lineWidth一半的半圆
suqare	两端多出lineWidth一半的方形

画几条线

代码和效果可以在这里看

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas id="line" width="150" height="150"></canvas>
    <script>
        // lineWidth 绘制的线条的粗细 默认值是1
        // lineCap 线条两端点显示的样式 默认是:butt.还有round(两端添加半径为lineWidth一半的半圆),suqare(两端多出lineWidth一半的方形)
        // lineJoin 两段线连接处所显示的样子,默认:miter
            let canvas = document.getElementById('line');
            let type = ['butt', 'round', 'square'],
                 ctx = canvas.getContext('2d');
            ctx.lineWidth = 20;  
            for (let i = 0; i < type.length; i++) {
                ctx.lineCap = type[i];
                ctx.beginPath();
                ctx.moveTo(30 + i*40, 15);
                ctx.lineTo(30 + i*40,135);
                ctx.stroke();
    </script>
</body>

</html>