canvas学习(一)---------------初始canvas_canvas只有一个-优快云博客

本文介绍Canvas的基本使用方法，包括画布的设置、获取上下文对象、绘制及填充矩形等基本图形，并通过实例演示如何利用JavaScript进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas 三要素：
1、id做为唯一的标识
2、width:画布内容宽度的像素大小(与style的宽度和高度是有区别的)
3、height:画布内容高度的像素大小

注：canvas 仅仅只是1个画布标签，要绘制内容，必须要用js
VS Code编辑器在不安装相关插件的情况下，使用canvas绘制图形是没有代码提示的，这个时候可以添加一行注释来解决

    /** @type {HTMLCanvasElement} */

canvas的使用步骤

1、找到画布对象
2、上下文对象(画笔)
3、绘制路径
4、填充
5、渲染路径或者描边

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas1" width="600" height="600">
        这里是内容，正常的画布是显现的，你的浏览器不支持canvas
    </canvas>
</body>

</html>

<script>
    //1、找到画布对象
    var canvas1 = document.getElementById('canvas1')
    //2、上下文对象(画笔)
    var ctx = canvas1.getContext('2d')
    //3、绘制矩形路径
    ctx.rect(50,50,300,300)
    //4、填充
    ctx.fillStyle = 'aqua'  //设置或返回用于填充绘画的颜色、渐变或模式
    ctx.fill() //填充
    //5、渲染路径  或者描边
    ctx.lineWidth=20   //调整线宽
    ctx.strokeStyle='red' //设置或返回用于笔触的颜色、渐变或模式
    ctx.stroke()
</script>