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格式的笔记
posted @ 2020-05-26 23:30  lanshanxiao  阅读(...)  评论(...编辑  收藏