3.标签篇：canvas

# 3.标签篇：canvas

- 1. 语义化标签

都是块盒

<header></header>:页头

<footer></footer>:页脚

<nav></nav>:导航

<article></article>:用于文章，可以直接被引用拿走的

<section></section>:用于段落

<aside></aside>:侧边栏

- 2. canvas

```html

<style>

#can{

width:500px;

height:300px;

border:1px solid black;

}

</style>

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>

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>

//写一个下落的矩形

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>

//画圆，圆心(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>

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>

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>

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>

var canvas = document.getElementById("can");

var ctx = canvas.getContext("2d");//获得画笔

ctx.beginPath();

ctx.scale(2, 1);//缩放

ctx.strokeRect(100, 100, 100, 100);

</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>

//记住：纹理的填充都是以坐标系原点进行填充的，所以填充之前，看是否需要改变坐标系原点

//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>

//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>

//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>

//给矩形添加阴影

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>

//绘制文字

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>

//线端样式

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格式的笔记

posted @ 2020-05-26 23:30 lanshanxiao 阅读(294) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

3.标签篇：canvas

公告