绘制直线
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="myid" width="500" height="500">
您的浏览器不支持canvas,请更换浏览器!
</canvas>
</body>
<script>
// 获取canvas
var canvas = document.getElementById("myid");
// 获取context上下文--> 用于储存操作步骤
var context = canvas.getContext("2d");
context.beginPath();// 开启一条路径
context.moveTo(100,100);// (x,y) 起点
context.lineTo(200,100);// 终点
context.lineWidth = 20;// 线宽度
context.strokeStyle = "red";// 颜色
context.lineCap = "square";// butt round square
context.stroke();// 绘制
context.beginPath();// 重新启动一条路径
context.moveTo(100,200);// (x,y) 起点
context.lineTo(200,200);// 终点
context.strokeStyle = "blue";
context.lineCap = "butt";
context.stroke();
</script>
</html>
绘制三角形
<script>
// 获取canvas
var canvas = document.getElementById("myid");
// 获取context上下文--> 用于储存操作步骤
var context = canvas.getContext("2d");
context.beginPath();// 开启一条路径
context.moveTo(100,100);// (x,y) 起点
context.lineTo(100,200);// 开始画线了
context.lineTo(200,100);
context.lineTo(100,100);
context.closePath();// 把图形闭合,不要上面一句(100,100),它也会形成三角
context.fillStyle = "red";// 设置填充样式
context.lineWidth = 10;
context.fill();// 填充
context.stroke();// 画完
</script>
绘制长方形
<script>
// 获取canvas
var canvas = document.getElementById("myid");
// 获取context上下文--> 用于储存操作步骤
var context = canvas.getContext("2d");
// 第一种方式
// context.beginPath();// 开启一条路径
// context.moveTo(100,100);// (x,y) 起点
// context.lineTo(200,100);
// context.lineTo(200,200);
// context.lineTo(100,200);
// context.closePath();
// context.stroke();
// 第二种方式
// context.beginPath();
// context.rect(100,100,100,100);// (x,y,x的长度,y的长度)
// context.stroke();
//第三种方式
context.beginPath();
context.strokeStyle = "red";
context.fillStyle = "yellow";
context.strokeRect(100,100,100,100);// (x坐标,y坐标,x的长度,y的长度)
context.fillRect(200,200,100,100);// 填充:(x,y,x的长度,y的长度)
context.stroke();
</script>
绘制多个长方形
<script>
// 获取canvas
var canvas = document.getElementById("myid");
// 获取context上下文--> 用于储存操作步骤
var context = canvas.getContext("2d");
var arr = ["red","blue","yellow","gray"];
for(let i = 0; i < arr.length; i++) {
context.beginPath();
context.fillStyle = arr[i];
context.fillRect(100 + i * 20, 100 + i * 20, 200, 100);
}
</script>
绘制国际棋盘
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="myid" width="800" height="800">
您的浏览器不支持canvas,请更换浏览器!
</canvas>
</body>
<script>
// 获取canvas
var canvas = document.getElementById("myid");
// 获取context上下文--> 用于储存操作步骤
var context = canvas.getContext("2d");
for(let x = 0; x < 800; x += 200) {
for(let y = 0; y < 800; y += 200) {
context.beginPath();
context.fillRect(x, y, 100, 100);
context.fillRect(x + 100, y + 100, 100, 100);
}
}
</script>
</html>
绘制圆
<script>
// 获取canvas
var canvas = document.getElementById("myid");
// 获取context上下文--> 用于储存操作步骤
var context = canvas.getContext("2d");
context.beginPath();
context.arc(100,100,50,0,2*Math.PI);// 圆心(100,100)半径50,开始角0度,结束角2*PI
context.stroke();
context.beginPath();
context.arc(300,100,50,0,Math.PI,false);// 最后一个参数false为顺时针,true为逆时针
context.stroke();
</script>
绘制太极八卦
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="myid" width="400" height="400">
您的浏览器不支持canvas,请更换浏览器!
</canvas>
</body>
<script>
// 获取canvas
var canvas = document.getElementById("myid");
// 获取context上下文--> 用于储存操作步骤
var context = canvas.getContext("2d");
// 绘制背景
context.beginPath();
context.fillStyle = "gray";
context.fillRect(0,0,canvas.width,canvas.height);// 画布变灰色
// 左边黑色半圆
context.beginPath();
context.fillStyle = "black";
context.arc(200,200,200,Math.PI*0.5,Math.PI*1.5);
context.fill();
// 右边白色半圆
context.beginPath();
context.fillStyle = "white";
context.arc(200,200,200,Math.PI*1.5,Math.PI*0.5);
context.fill();
// 上面黑色大圆
context.beginPath();
context.fillStyle = "black";
context.arc(200,100,100,0,Math.PI*2);
context.fill();
// 下面白色大圆
context.beginPath();
context.fillStyle = "white";
context.arc(200,300,100,0,Math.PI*2);
context.fill();
// 上面白色小圆
context.beginPath();
context.fillStyle = "white";
context.arc(200,100,20,0,Math.PI*2);
context.fill();
// 下面黑色小圆
context.beginPath();
context.fillStyle = "black";
context.arc(200,300,20,0,Math.PI*2);
context.fill();
</script>
</html>
绘制文字
<script>
// 获取canvas
var canvas = document.getElementById("myid");
// 获取context上下文--> 用于储存操作步骤
var context = canvas.getContext("2d");
context.beginPath();
// context.strokeText("hello world", 100, 100);
// context.textAlign = "center";// 居中对齐
// context.textBaseline = "top";
context.font = "italic 50px Arial";
context.fillText("hello world", 250, 250);
// x的参照线
context.beginPath();
context.moveTo(250,0);
context.lineTo(250,500);
context.stroke();
// y的参照线
context.beginPath();
context.moveTo(0,250);
context.lineTo(500,250);
context.stroke();
/*
文字水平对齐
textAlign: left center right
*/
/*
文字垂直对齐
textBaseLine: top middle bottom
alphabetic(拉丁文) ideographic(汉字)
hanging(印度文字)
*/
</script>
设置渐变色
<script>
// 获取canvas
var canvas = document.getElementById("myid");
// 获取context上下文--> 用于储存操作步骤
var context = canvas.getContext("2d");
// 线性渐变
// context.beginPath();
// var gradientColor = context.createLinearGradient(0,0,500,0);// (0,0) --> (400,0)的渐变
// gradientColor.addColorStop(0,"blue");//0-1之间,这边给了三个渐变色,当然可以给多个渐变
// gradientColor.addColorStop(0.5,"yellow");
// gradientColor.addColorStop(1,"green");
// context.fillStyle = gradientColor;
// context.fillRect(0,0,500,500);
// 径向渐变
context.beginPath();
// 第一个圆(250,250)半径50,第二个圆(250,250),半径200
var gradientColor = context.createRadialGradient(250,250,50,250,250,200);
gradientColor.addColorStop(0,"red");
gradientColor.addColorStop(0.5,"yellow");
gradientColor.addColorStop(1,"pink");
context.fillStyle = gradientColor;
context.fillRect(0,0,500,500);
</script>
线性渐变
径向渐变
绘制阴影
<script>
// 获取canvas
var canvas = document.getElementById("myid");
// 获取context上下文--> 用于储存操作步骤
var context = canvas.getContext("2d");
context.beginPath();
context.shadowBlur = 10;// 阴影的模糊程度
context.shadowColor = "red";
context.shadowOffsetX = -10;// 阴影,简单说就是左右,左为负,右为正
context.shadowOffsetY = 10;// 阴影,简单说就是上下,上为负,下为正
context.fillRect(100,100,100,100);
</script>
图形变换
<script>
// 获取canvas
var canvas = document.getElementById("myid");
// 获取context上下文--> 用于储存操作步骤
var context = canvas.getContext("2d");
context.beginPath();
// context.translate(100,100);// x轴平移100,y轴平移100
// context.rotate(Math.PI/4);// 旋转四十五度
// context.scale(2,2)// 缩放,x轴缩放2倍,y轴缩放2倍
// 上面的都是针对于所有canvas上的图形,都会受到影响
context.fillRect(100,0,50,50);
</script>
状态的保存和获取
<script>
// 获取canvas
var canvas = document.getElementById("myid");
// 获取context上下文--> 用于储存操作步骤
var context = canvas.getContext("2d");
context.beginPath();
context.save();//++++++++++++第一次 保存没有平移旋转的状态
context.translate(100,0);//平移
context.rotate(Math.PI/4);// 旋转45度
context.save();//++++++++++++第二次 平移旋转的状态
context.fillRect(100,0,50,50);
context.restore();//++++++++++++第一次 重新把这个状态获取到
context.fillRect(0,0,50,50);
context.restore();//++++++++++++第二次,会把第二次的获取到,可以设置多个save
context.fillRect(0,0,50,50);
</script>
贝塞尔曲线
<script>
// 获取canvas
var canvas = document.getElementById("myid");
// 获取context上下文--> 用于储存操作步骤
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(0,0);
context.quadraticCurveTo(500,0,500,500);// 两次贝塞尔曲线的坐标
context.stroke();
context.beginPath();
context.moveTo(0,0);
context.bezierCurveTo(500,0,0,500,500,500);// 三次贝塞尔曲线的坐标
context.stroke();
</script>
如果看不明白的,可以登录一个网站自己去看看
https://cubic-bezier.com
<script>
// 获取canvas
var canvas = document.getElementById("myid");
// 获取context上下文--> 用于储存操作步骤
var context = canvas.getContext("2d");
// 左上右下的贝塞尔曲线
context.beginPath();
context.moveTo(0,0);
context.bezierCurveTo(500*.86,500*.19,500*.1,500*.74,500,500);
// 左下右上的贝塞尔曲线
context.moveTo(0,500);
context.bezierCurveTo(500*.11,500*.73,500*.85,500*.39,500,0);
context.stroke();
</script>