Canvas画布

最新推荐文章于 2024-08-12 23:44:43 发布

_忆拾

最新推荐文章于 2024-08-12 23:44:43 发布

阅读量87

点赞数 1

分类专栏：笔记文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/weixin_57332596/article/details/125809288

版权

笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

canvas画布简介

<canvas id="canvas" width="500" height="500"></canvas>

canvas是H5新增元素，默认情况下在网页中显示一块300*150，需要结合js来绘制图形，相当于在网页上放置了一块画板，可以在上边绘制横线、虚线、矩形、圆形等，画布左上角为0，0点，起始点连接点

画布的使用

首先在body中写一个<canvas id="canvas"></canvas>标签，并添加一个id名（方便js获取该元素）。

<body>
  <canvas id="canvas" style="border:1px solid red">
  </canvas>
</body>

现在打开网页看不到任何元素给他在设置一个边框，方便查看，打开网页可以看到有一个方框，它就是我们设置的画布。

先写出画条线来试一下，因为需要结合js来绘制，所以需要先选中画布来进行操作。

<script type="text/javascript">
    // 1、选中画布元素
    var canvas = document.getElementById('canvas');
    // 2、创建一个画布上下文对象    创建内置2d对象
    var canvasObj = canvas.getContext("2d");
    // 3、绘画路径开始
    canvasObj.beginPath();
    // 4、绘制图形的起始点(坐标)
    // 从0点开始 0点为画布的左上角
    canvasObj.moveTo(0, 0);
    // 绘制图形的连接点(坐标)
    canvasObj.lineTo(100, 100);
    //设置边框颜色
    canvasObj.strokeStyle = "blue"
    // 添加边框
    canvasObj.stroke();
</script>

刷新网页可以看到页面上出现了一个斜线，由于x，y容易弄混所以可以看下图，只有红色边框和蓝色斜线为网页所显示内容

现在在画一条虚线，给条线设置起始点和结束点就可以写出虚线，

这么写有点麻烦，找一下其中的规律，可以直接用循环写，

for (let i = 5; i <= 200; i += 5) {
        canvasObj.moveTo(i, 100);
        canvasObj.lineTo(i += 3, 100);
}

这是在页面上的效果

当然还有更简单的，直接使用附带的方法会更简单，两个长虚线一个短虚线，下边的10，10，5则是相对应的长度

圆形

元的属性有圆心、半径、元的长度（半圆/四分之一圆）默认顺时针

//   中心交叉点 X   Y   半径 开始位置 结束位置 true为顺时针 false为逆时针
canvasObj.arc(100, 80, 50, 0, Math.PI * 2, true)

下图有助于理解开始顺时针的时候从开始位置绘画和逆时针的时候从开始位置绘画所展示出的不同效果

椭圆形

与圆形不同的是椭圆形有两个半径值、还有一个旋转角度，默认顺时针，旋转角度可以将椭圆进行平面旋转

// x, y, 第一个半径, 第二个半径, 旋转角度, 起始角度, 结束角度, true为顺时针/false为逆时针
canvasObj.ellipse(100, 100, 50, 30, 50, 0, Math.PI * 2, true);

拓展

//开始执行
content.beginPath();
//绘制图形的起始点(坐标)
content.moveTo(0,0);
//绘制图形的结连接点
content.lineTo(100,100);
//边框颜色
content.stokeStyle="red";
content.stoke();
//边框粗细
content.lineWidth=5;
//填充 默认填充黑色
content.fillStyle="blue"
content.fill();
//闭合路径
content.closePath
//虚线
//设置的是虚线的呈现方式
//两个长度10的线 一个长度为5的线
content.setLineDash([10,10,5]);
content.moveTo(0,0);
content.lineTo(200,0);
//创建矩形
rect()
//创建填充矩形
fillRect(x,y,width,height)
//创建无填充矩形
scrokeRect(x,y,width,height)
//删除画布中的矩形区域
clearRect(x,y,width,height)
//画圆
//true为顺时针 false逆时针
content.arc(x,y,r,start,stop,[true/false])
canvasObj.arc(100, 100, 50, 0, Math.PI*2, true)
//画椭圆
canvasObj.ellipse(x, y, 第一个半径, 第二个半径, 旋转角度, 起始角度, 结束角度, true);
canvasObj.ellipse(100, 100, 50, 30, 0, 0, Math.PI * 2, true);