H5 学习足迹(三)

最新推荐文章于 2021-06-10 13:52:40 发布

置顶 KrisChung

最新推荐文章于 2021-06-10 13:52:40 发布

阅读量515

点赞数

分类专栏：个人总结

本文链接：https://blog.csdn.net/qq_39469688/article/details/98210756

版权

个人总结专栏收录该内容

43 篇文章 1 订阅

订阅专栏

文章目录

canvas介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="rect"></canvas>
<canvas id="circle"></canvas>

</body>

<script>

    // canvas 基础

    // 1.获取元素
    const cv = document.querySelector('canvas');
    // 2.新建画布 canvas只有2d
    const c = cv.getContext('2d');
    // canvas图形都是根据坐标  （0,0）在画布左上角 rect()矩形
    // 3.画图形 左上角为 (0,0)坐标点  横轴为x 纵轴为y
    c.rect(0,0,200,100)
    // 4.开始画  fill()填充  stroke()描边
    // c.fill()
    c.stroke()


    矩形
    const cv = document.querySelector('canvas');
    const c = cv.getContext('2d');
    // 图形 复合属性
    // c.strokeRect(0,0,200,100)
    c.fillRect(0,0,200,100)

    // 圆形
    const cv1 = document.querySelector('canvas');
    const c1 = cv1.getContext('2d');
    // arc()参数 1:x 2:y 确定圆的中心点  3:半径  4.从多少弧度开始画(0为默认，默认从圆的三点钟位置开始画)  5.画到多少弧度结束  6.顺时针false还是逆时针true画
    /*
    *   圆周长 2πr  弧度2π
    *   180°弧度对应  180 * π / 180
    *   90°弧度对应  90 * π / 180
    * */
    c1.arc(200,100,30,0,180 * Math.PI / 180,false)
    c1.fill()
    // img




</script>
</html>

在这里插入图片描述

canvas 直线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas></canvas>
</body>
<script>

    /*
    *   canvas 直线
    *       画直线只能用stroke  不能用fill
    * */
    const cv = document.querySelector('canvas');
    const c = cv.getContext('2d');
    // 开始点  x , y   moveTo到起点   lineTo到终点
    c.moveTo(50,50)
    c.lineTo(100,100)
    c.stroke()
</script>

</html>

canvas 样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    canvas{
        /*width: 300px;*/
        /*height: 200px;*/
        border:1px solid red;
    }

</style>
<body>
<!--
     canvas默认宽高为300 150
     如何设置canvas的宽和高
        1.style标签内直接设置
        2.cv.height = ...
-->
    <canvas width="300" height="150"></canvas>
</body>
<script>

    /*
    *   canvas 样式
    *
    * */
    const cv = document.querySelector('canvas');
    const c = cv.getContext('2d');
    cv.height = window.innerHeight
    cv.width = window.innerWidth
    c.moveTo(50,50)
    c.lineTo(100,100)
    c.stroke()

</script>
</html>

canvas 填充颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas width="300" height="200"></canvas>
</body>
<script>
    const cv = document.querySelector('canvas');
    const c = cv.getContext('2d');
    // 填充颜色
    c.fillStyle = '#963';
    // c.fillStyle = 'red';
    // c.fillStyle = 'rgb(43,43,43)';

    c.rect(0,0,200,200);
    c.fill();
    // img

    c.stroke();
    // 边框线样式
    c.strokeStyle = 'rgb(43,43,43)'
    // img


</script>

</html>

在这里插入图片描述

canvas 边框线样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas width="600" height="600"></canvas>
</body>
<script>

    var cv = document.querySelector('canvas');
    var c = cv.getContext('2d');
    // 边框粗细 lineWidth单位为1px
    /*
    *   c.lineWidth = 1
    *   根据边框中心线分为上下两部分，上面0.5px 下面0.5px
    * */
    c.lineWidth = 20;
    // c.rect(100,100,200,300);
    // img
    c.arc(200,200,100,0.15*Math.PI,1.8*Math.PI);
    c.stroke();
    // img



</script>

</html>

在这里插入图片描述

canvas 优先级beginPath

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas width="600"  height="500"></canvas>

</body>
<script>

    const cv = document.querySelector('canvas');
    const c = cv.getContext('2d');

    c.lineWidth = 10;
    c.moveTo(30,30);
    c.lineTo(130,30);
    c.stroke();

    // beginPath 重置  优先级以此开始,代码顺序执行后面代码样式不会覆盖前面代码样式
    c.beginPath();

    c.lineWidth = 20;
    c.strokeStyle = 'red'
    c.moveTo(100,100);
    c.lineTo(200,100);
    c.stroke();

    c.beginPath();
    c.lineWidth = 30;
    c.moveTo(120,150);
    c.lineTo(220,150);
    c.stroke();

    // img
</script>
</html>

在这里插入图片描述

canvas closePath

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="600"  height="500"></canvas>

</body>
<script>

    const cv = document.querySelector('canvas');
    const c = cv.getContext('2d');
    // c.arc(100,100,30,1.5*Math.PI,Math.PI);
    // // closePath 闭合路径
    // c.closePath();
    // c.stroke();
    // img

    c.moveTo(100,200);
    c.lineTo(300,200);
    c.lineTo(200,100);
    // 闭合图形
    c.closePath();
    c.stroke();
    // img

</script>
</html>

在这里插入图片描述

canvas 清除矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas width="600" height="600"></canvas>
</body>
<script>

    const cv = document.querySelector('canvas');
    const c = cv.getContext('2d');

    c.rect(50,50,200,200)
    c.fill();

    // clearRect 清除矩形  参数1:起点坐标x  2:起点坐标y  3:清除矩形的width  4:清除矩形的height
    c.clearRect(80,80,140,140)
	// img
</script>
</html>

在这里插入图片描述

canvas 边界样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>


</style>
<body>
    <canvas width="500" height="500"></canvas>
</body>
<script>
    const cv = document.querySelector('canvas');
    const c = cv.getContext('2d');

    c.lineWidth = 20;
    /*
    *   lineJoin 边界样式  类似于css 的 border-radius
    *   代码执行条件：需要图形有角
    *   1: round 圆角
    *   2: bevel 平角
    *   3: 默认值 miter
    * */
    c.lineJoin = 'bevel';
    c.rect(100,100,100,100);
    c.stroke();
    // img
    // img

    c.moveTo(100,100);
    c.lineTo(300,300);
    c.lineTo(300,100);
    c.closePath();
    c.lineJoin = 'round'
    c.stroke();
    // img

    c.lineWidth = 10;
    c.arc(100,100,50,0,Math.PI);
    c.lineJoin = 'round';
    c.closePath();
    c.stroke();
    // img
</script>

</html>

round

bevel

在这里插入图片描述

canvas 端点样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>


</style>
<body>
    <canvas width="500" height="500"></canvas>
</body>
<script>
    const cv = document.querySelector('canvas');
    const c = cv.getContext('2d');

    /*
    *   端点样式 lineCap
    *   1: butt 默认值
    *   2: 圆角 round
    *   3: square 端点平角 （增加线宽的一半）
    * */
    c.lineCap = 'butt';
    c.lineWidth = 10;
    c.moveTo(50,100);
    c.lineTo(50,200);
    c.stroke();

    c.beginPath();
    c.lineCap = 'round';
    c.moveTo(100,100);
    c.lineTo(100,200);
    c.stroke();

    c.beginPath();
    c.lineCap = 'square';
    c.moveTo(150,100);
    c.lineTo(150,200);
    c.stroke();
    // img

    c.lineWidth = 10;
    c.arc(100,100,50,0,Math.PI);
    c.lineCap = 'round';
    c.stroke();
    // img


</script>

</html>

在这里插入图片描述

canvas 重新定义起点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>


</style>
<body>
<canvas width="500" height="500"></canvas>
</body>
<script>
    const cv = document.querySelector('canvas');
    const c = cv.getContext('2d');

    /*
    *     translate() 定义起点
    *
    * */
    // 起点 (0,0)
    c.translate(0,0);
    c.rect(100,0,100,100);
    c.fill();

    c.translate(0,200);
    // 起点 (0,200)
    c.rect(0,0,100,100);
    c.fill();

    // img


</script>

</html>

在这里插入图片描述

canvas 旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>


</style>
<body>
<canvas width="500" height="500"></canvas>
</body>
<script>
    const cv = document.querySelector('canvas');
    const c = cv.getContext('2d');

    /*
    *   rotate(度数) 旋转
    *       以起点(默认起点为0,0)开始那个端点开始旋转
    *
    * */
    // 自定义起点(150,50)
    c.translate(150,50);
    c.rotate(30 * Math.PI / 180);
    c.rect(0,0,100,100);
    c.fill();
    // img




</script>

</html>

在这里插入图片描述

canvas 保存和释放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas width="500" height="500"></canvas>
</body>
<script>
    const cv = document.querySelector('canvas');
    const c = cv.getContext('2d');

    /*
    *   保存和释放
    *       save()  restore()
    *   对样式的保存和释放
    *
    * */
    c.lineCap = 'butt';
    c.strokeStyle = 'red'

    c.moveTo(50,100);
    c.lineTo(50,200);
    c.stroke();

    c.save();
    c.beginPath();
    // restore释放之后的代码只能应用到save之前的代码样式(保存了第一条线的样式在第二条线结束时释放，则第三条线执行第一条线的样式代码，相当于第一条线的样式代码被复制到第三条线上方,根据代码执行顺序)
    // 因为第一条线的样式已经被save  所以第二条线依然能够得到第一条线的样式(如果没有beginPath)
    c.lineCap = 'round';
    c.strokeStyle = 'blue'
    c.lineWidth = 10;
    c.moveTo(100,100);
    c.lineTo(100,200);
    c.stroke();

    c.restore()
    c.beginPath();

    c.moveTo(150,100);
    c.lineTo(150,200);
    c.stroke();
    // img


</script>

</html>

在这里插入图片描述