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

注释很详细，直接上代码

新增内容：

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();