3.标签篇：canvas
# 3.标签篇：canvas
- 1. 语义化标签
都是块盒
<header></header>:页头
<footer></footer>:页脚
<nav></nav>:导航
<article></article>:用于文章，可以直接被引用拿走的
<section></section>:用于段落
<aside></aside>:侧边栏
- 2. canvas
<canvas></canvas>
```html
<style>
#can{
width:500px;
height:300px;
border:1px solid black;
}
</style>
<!--canvas的大小要在行间样式上写width和height-->
<canvas id="can" width="500px" height="300px"><canvas>
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");//获得画笔
//画一条线
ctx.lineWidth = 10;//设置线的粗细
ctx.moveTo(100, 100);//起点
ctx.lineTo(200, 100);//终点
ctx.lineTo(200, 200);//终点
//ctx.closePath();//之前的线是连续的，就可以闭合起点和最后一个终点
//ctx.fill();//未闭合区域填充色彩
ctx.stroke();//展示画出的效果
ctx.beginPath();//重现开启一个新路径
ctx.lineWidth = 5;//设置线的粗细
ctx.moveTo(200, 200);//起点
ctx.lineTo(300, 300);//终点
ctx.stroke();
</script>
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");//获得画笔
//画一个矩形，方式一
ctx.rect(100, 100, 200, 100);//给出矩形起点的坐标和长与宽
ctx.fill();
ctx.stroke();
//画一个矩形，方式二
ctx.strokeRect(100, 100, 200, 100);
//画一个矩形，方式三
ctx.strokeRect(100, 100, 200, 100);
</script>
<script>
//写一个下落的矩形
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");//获得画笔
var height = 100;
var timer = setInterval(function(){
ctx.clearRect(0, 0, 500, 300);//清除画布矩形区域上，原来画的图案
ctx.strokeRect(100, height, 50, 50);
height += 2;
}, 1000 / 30);
</script>
<script>
//画圆，圆心(x, y), 半径r, 弧度(起始弧度, 结束弧度), 方向(顺时针或逆时针)
//弧度从0开始，右手边水平方向位置
//弧度以圆周长计算，其中Math.PI代表圆周率π
//顺时针为0，逆时针为1
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");//获得画笔
//画一个圆
//arc(圆心x, 圆心y, 半径r, 起始弧度, 结束弧度, 方向)
ctx.arc(100, 100, 50, 0, Math.PI/2, 0);
ctx.lineTo(100,100);
ctx.closePath();
ctx.stroke();
</script>
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");//获得画笔
//画一个圆角矩形
ctx.moveTo(100, 110);//起点A
//arcTo(矩形拐角B点x, 矩形拐角B点y, 弧形方向C点x, 弧形方向C点y, 弧形像素)
ctx.arcTo(100, 200, 200, 200, 10);
ctx.arcTo(200, 200, 100, 200, 10);
ctx.arcTo(200, 100, 100, 100, 10);
ctx.arcTo(100, 100, 100, 200, 10);
ctx.fill();
ctx.stroke();
</script>
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");//获得画笔
//画二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(100, 100);//起点A
//quadraticCurveTo二次贝塞尔曲线的其他两个点坐标
ctx.quadraticCurveTo(200, 200, 300, 100);
ctx.stroke();
//画三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(100, 100);//起点A
//bezierCurveTo三次贝塞尔曲线的其他三个点坐标
ctx.bezierCurveTo(200, 200, 300, 100, 400, 200);
ctx.stroke();
//画一个宽500，高300的波浪
var width = 500;
var height = 300;
var num = 0;
var offset = 0;
setInterval(function(){
ctx.clearRect(0, 0, 500, 300);
ctx.beginPath();
ctx.moveTo(0, height / 2);//起点A
//quadraticCurveTo二次贝塞尔曲线的其他二个点坐标
ctx.quadraticCurveTo(width/4 + offset - 500, height/2 + Math.sin(num)* 100, width/2 + offset - 500, height/2 + Math.sin(num)* 100);
ctx.quadraticCurveTo(width/4*3 + offset - 500, height/2 - Math.sin(num)* 100, width + offset - 500, height/2 - Math.sin(num)* 100);
//quadraticCurveTo二次贝塞尔曲线的其他二个点坐标
ctx.quadraticCurveTo(width/4 + offset, height/2 + Math.sin(num)* 100, width/2 + offset, height/2 + Math.sin(num)* 100);
ctx.quadraticCurveTo(width/4*3 + offset, height/2 - Math.sin(num)* 100, width + offset, height/2 - Math.sin(num)* 100);
ctx.stroke();
offset += 5;
offset %= 500;
num += 0.02;
}, 1000/30);
</script>
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");//获得画笔
//坐标系原点默认是画布的左上角
//旋转
ctx.beginPath();
ctx.translate(100, 100);//坐标系原点平移到100,100
ctx.rotate(Math.PI / 6);//根据坐标系原点进行旋转
ctx.moveTo(0, 0);//起点A
ctx.lineTo(100, 0);
ctx.stroke();
</script>
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");//获得画笔
ctx.beginPath();
ctx.scale(2, 1);//缩放
ctx.strokeRect(100, 100, 100, 100);
</script>
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");//获得画笔
//改变坐标系的状态后，怎样变回原来的坐标状态
ctx.save();//首先保存原坐标系的状态，可以保存坐标系的平移，缩放，旋转数据
ctx.translate(100, 100);//坐标系原点平移
ctx.rotate(Math.PI/4);//旋转
ctx.beginPath();
ctx.strokeRect(0, 0, 100, 50);
ctx.beginPath();
ctx.restore();//恢复原坐标系的状态
ctx.strokeRect(200, 0, 100, 50);
</script>
<script>
//记住：纹理的填充都是以坐标系原点进行填充的，所以填充之前，看是否需要改变坐标系原点
//canvas背景填充
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");//获得画笔
var img = new Image();
img.src = "./good.png";
img.onload = function(){
ctx.beginPath();
ctx.translate(100, 100);//改变坐标系原点
var bg = ctx.createPattern(img, "no-repeat");//为画填充纹理
ctx.fillStyle = bg;//换背景
ctx.fillRect(100, 100, 200, 100);
};
</script>
<script>
//canvas线性渐变，线性渐变的起点是坐标系原点
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");//获得画笔
ctx.beginPath();
var bg = ctx.createLinearGradient(0, 0, 200, 0);//渐变的两点的坐标
bg.addColorStop(0, "white");//添加关键点，第一个参数只能0-1
bg.addColorStop(0.5, "blue");
bg.addColorStop(1, "black");
ctx.fillStyle = bg;
ctx.fillRect(0, 0, 200, 100);
</script>
<script>
//canvas辐射渐变，辐射渐变的起点是坐标系原点
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");//获得画笔
ctx.beginPath();
var bg = ctx.createRadialGradient(100, 100, 30, 100, 100, 100);//渐变的圆心坐标x1,y1,半径r1;圆心坐标x2,y2,半径r2;
bg.addColorStop(0, "white");//添加关键点，第一个参数只能0-1
bg.addColorStop(0.5, "black");
bg.addColorStop(1, "white");
ctx.fillStyle = bg;
ctx.fillRect(0, 0, 200, 200);
</script>
<script>
//给矩形添加阴影
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");//获得画笔
ctx.beginPath();
ctx.shadowColor = "blue";//添加阴影颜色
ctx.shadowBlur = 20;//添加阴影半径
ctx.shadowOffsetX = 15;//横坐标的阴影向右平移15px
ctx.shadowOffsetY = 15;//纵坐标的阴影向右平移15px
ctx.strokeRect(0, 0, 200, 200);
</script>
<script>
//绘制文字
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");//获得画笔
ctx.beginPath();
ctx.strokeRect(0, 0, 200, 200);
ctx.fillStyle = "red";
ctx.font = "30px Georgia";//字体大小，字体
ctx.strokeText("panda", 200, 100);//回执的文字，横坐标，纵坐标。对文字描边，产生空心文字
ctx.fillText("panda", 200, 300);//回执的文字，横坐标，纵坐标。对文字填充，产生实心文字，可以改变文字颜色
</script>
<script>
//线端样式
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");//获得画笔
ctx.beginPath();
ctx.lineWidth = 15;
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
//ctx.lineCap = "square";//线两端的样式。butt:原封不动;squre:方形;round:半圆;
ctx.lineTo(100, 150);
//ctx.lineJoin = "round";//两条线交汇的样式。round:圆角;bevel:截断;miter:尖锐(设置为miter有一个miterLimit属性，防止过分尖锐);
//ctx.miterLimit = 5;//两条线交汇，限制交汇的长度
ctx.stroke();
</script>
```
以上是markdown格式的笔记
赞 (0)