分享篇：初识Canvas

小姚学前端

已于 2023-09-14 15:01:19 修改

阅读量119

点赞数 1

文章标签： javascript 学习开发语言

于 2023-09-14 14:05:52 首次发布

本文链接：https://blog.csdn.net/qq_52799985/article/details/132859487

版权

2.需要获取画笔对象（获取元素的 2D 上下文对象）

3.使用canvas提供的 api进行绘画

代码演示

注意

什么是Canvas？

Canvas 是一个 HTML5 的元素，用于在网页上绘制图形和动画。它提供了一个位图的绘图环境，可以使用 JavaScript 来控制绘图过程。Canvas 可以用于创建交互式的图表、游戏、信息可视化等各种应用。

canvas的坐标

当使用 <canvas> 进行绘图时，了解坐标体系是很重要的。canvas 的坐标系统使用了标准的笛卡尔坐标系，如下所示：

原点 (0,0) 位于左上角，具有最小的 x 和最大的 y 值。
x 轴向右为正方向，y 轴向下为正方向。
x 坐标表示点在水平方向上的位置，y 坐标表示点在垂直方向上的位置。

因此，如果要在 canvas 上绘制一个图形或放置一个元素，需要指定该元素相对于原点的 x 和 y 坐标。

例如，要在坐标 (100, 200) 处绘制一个方形，可以使用以下代码：

let canvas = document.querySelector('#myCanvas');
let context = canvas.getContext('2d');

let x = 100;
let y = 200;
let width = 50;
let height = 50;

context.fillRect(x, y, width, height);

在上述示例中，通过设置 x 和 y 变量的值分别为 100 和 200，确定了矩形的左上角在 canvas 上的位置。然后使用 context.fillRect() 方法绘制了一个宽度为 50，高度为 50 的矩形。

注意，canvas 的坐标系统是以像素为单位的，所以完全取决于你的设计和上下文来确定合适的坐标值。根据需要，可以通过计算、控制变量的值来放置元素在合适的位置。

使用canvas的基本步骤

步骤：

1.需要一个canvas标签

创建canvas标签的方法有两种：1.直接在html中的body里写一个canvas标签2.使用createElement（）创建函数的的方式用js创建一个canvas写入html。推荐使用第2种createElement（）创建元素的方法（createElement元素的方法，在接下来写相关代码时会有提示）

代码演示（方法1）
<body>
    <canvas width="600" height="400" id="canvas"></canvas>  
</body>
</html>
<script>
    //1.获取canvas标签/找到画布
    let canvas = document.getElementById('canvas');
</script>
代码演示（方法2）
<script>
    //1.先创建画布canvas
   let cavnas= document.createElement('canvas')
    document.body.append(cavnas);
</script
2.需要获取画笔对象（获取 <canvas> 元素的 2D 上下文对象）

通过调用 getContext('2d') 方法，可以获取到该元素的 2D 上下文对象。这个上下文对象可以用于在 <canvas> 上进行绘图、绘制图形、创建动画等操作。
//2.设置画笔
let context = cavnas.getContext('2d');
3.使用canvas提供的 api进行绘画

context.fillRect(x, y, width, height) 是2D上下文对象中的方法，用于在画布上绘制一个填充矩形。在给定的代码 context.fillRect(100, 100, 200, 200); 中，矩形被绘制在画布上，左上角的坐标为 (100, 100)，宽度和高度分别为 200。
 context.fillRect(100,100,200,200);  

代码演示

//1.获取canvas标签/找到画布
    let canvas = document.getElementById('canvas');
    
    
    //2.获取context（画笔）对象
    let context = canvas.getContext('2d');
      
    //判断是否有getContext
    if (!canvas.getContext) {
        alert('当前浏览器不支持canvas，请下载最新的浏览器')
    }
    //3.画出自己想要的图像
    //画出一个方形，有专门的api fillRect（x,y,width,height）
    context.fillRect(100,100,200,200);

注意

使用body里面的标签的方式创建一个canvas对象，默认情况下，他的大小是300X150

canvas 和别的元素不太一样需要使用属性的方式设置宽高

小姚学前端

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
分享篇：初识Canvas

Canvas 是一个 HTML5 的元素，用于在网页上绘制图形和动画。它提供了一个位图的绘图环境，可以使用 JavaScript 来控制绘图过程。Canvas 可以用于创建交互式的图表、游戏、信息可视化等各种应用。
复制链接

扫一扫