<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas画图基础版</title>
<style>
#myCanvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600px" height="600px"></canvas>
</body>
<script>
var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d');
// 画个直线
ctx.beginPath() //开始路径
ctx.moveTo(100, 30) //开始坐标
ctx.lineTo(200, 30) //结束坐标
// 在着色之前设置颜色和宽度
ctx.strokeStyle = 'red' //设置颜色
ctx.lineWodth = 10 //设置宽度
ctx.stroke(); //着色
ctx.closePath() //结束路径
//一个矩形
ctx.beginPath();
ctx.rect(100, 200, 100, 100) //矩形 context.rect(x,y,width,height);
ctx.fillStyle = '#E9686B' //定义用什么颜色填充
ctx.fill() //填充当前的图像(路径)
ctx.closePath()
//矩形二
ctx.beginPath();
ctx.fillRect(100, 350, 100, 100) //矩形 context.rect(x,y,width,height); 相当于ctx.rect和ctx.fill合并
ctx.fillStyle = '#E9686B' //定义用什么颜色填充
ctx.closePath()
//渐变的矩形
ctx.beginPath()
var grd = ctx.createLinearGradient(100, 50, 50, 170);
//createLinearGradient() 方法创建线性的渐变对象。 context.createLinearGradient(x0,y0,x1,y1);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(100, 50, 100, 100);
ctx.closePath()
//画个圆
ctx.beginPath();
//context.arc(x(x轴),y(y轴),r(半径),sAngle(开始角度),eAngle(结束角度),counterclockwise); Math.PI=π
ctx.arc(400, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'blue' //定义用什么颜色填充
ctx.fill() //填充当前的图像
ctx.closePath() //结束路径
//画个半圆
ctx.beginPath()
ctx.arc(400, 300, 50, 0, 1 * Math.PI)
ctx.fillStyle = 'yellow'
ctx.strokeStyle = 'red' //线的填充色
ctx.fill()
ctx.stroke()
ctx.closePath()
// 椭圆
ctx.beginPath()
ctx.ellipse(400, 400, 15, 30, 0, 0, Math.PI * 2);
// ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是现在更新的，
// 参数的意思：(起点x.起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针)
ctx.fillStyle = 'yellow'
ctx.strokeStyle = 'red' //线的填充色
ctx.fill()
ctx.stroke()
ctx.closePath()
</script>
</html>
这是一个自学笔记