canvas快速入门（一）canvas的基础使用

最新推荐文章于 2024-09-11 15:33:18 发布

代码对我眨眼睛

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量225

点赞数 8

分类专栏： canvas 文章标签： javascript 前端 canvas

本文链接：https://blog.csdn.net/m0_73756108/article/details/140373505

版权

canvas 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

注释很详细，直接上代码

新增内容：

1. canvas的两种创建方式及优劣

2. canvas宽高设置及注意事项

3. 简单测例

项目结构：

在这里插入图片描述

源码：

index.html

<!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>
<style>
    *{
        margin: 0;
        padding: 0;
    }
</style>
<body>
    
    <!-- 手动创建画布，需要以属性的方式设置宽高 -->
    <canvas id="myCanvas" width="500" height="400"></canvas>
</body>
<script src="./js/canvas.js"></script>
</html>

canvas.js

/**
 * 对手动创建的画布的操作，因为是以节点创建，不被识别为画布对象，所以没代码提示
 */

//获取画布myCanvas
var myCanvas = document.getElementById("myCanvas");

//获取画笔对象
var myPen = myCanvas.getContext("2d");

//设置画笔颜色
myPen.fillStyle = "red";

//画一个矩形，fillRect(x,y,width,height)，参数是左上角坐标和宽高
myPen.fillRect(20,20,100,100);


/**
 * 使用js创建画布，再添加到页面中，这样就可以识别为画布对象，有更多代码提示
 */

//创建画布
var myCanvasByJs = document.createElement("canvas");

//设置画布宽高
//canvas为了能正常显示，需要用属性设置宽高，而不能用样式设置
myCanvasByJs.width = 500;
myCanvasByJs.height = 400;

//将画布添加到页面中
document.body.append(myCanvasByJs);

//获取画笔对象
var myPenByJs = myCanvasByJs.getContext("2d");

//设置画笔颜色
myPenByJs.fillStyle = "blue";

//开始路径
myPenByJs.beginPath();

//绘制圆   
myPenByJs.arc(200,200,100,0,2*Math.PI);

//填充颜色
myPenByJs.fill();