Canvas笔记

最新推荐文章于 2023-04-07 11:04:45 发布

安静宅男爱蓝猫

最新推荐文章于 2023-04-07 11:04:45 发布

阅读量312

点赞数

分类专栏： js案例文章标签： canvas

@By-蓝猫

本文链接：https://blog.csdn.net/qq_43355930/article/details/105806911

版权

js案例专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Canvas

1.Canvas介绍

1.1什么是Canvas

定义：是HTML5提供的一种新标签, ie9才开始支持的，Canvas是一个矩形区域的画布，可以用JS控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

1.2Canvas主要应用的领域

1 可视化数据： 各类统计图表，比如:百度的echart

2 场景秀： 用Canvas实现动态的广告效果能够非常融洽的跨平台运行。如:手机中微产品.在移动端兼容性很好

3 游戏： canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas成为HTML5小游戏开发首选。现阶段h5做游戏,营业方式不是很明确. 25 超棒的 HTML5 Canvas 游戏

4 其他可嵌入网站的内容 (多用于活动页面、特效)：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。

5 趋势=> 模拟器： 无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。模拟真实硬件环境,如移动端各种类型手机.

6 趋势=> 远程计算机控制： Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。

7 趋势=> 图形编辑器： Photoshop图形编辑器将能够100%基于Web实现。

1.3Canvas的使用步骤

(function f() {
            //第一步:获取canvas元素
        var canvasNode = document.querySelector("#myCanvas");
        //第二步  设置画布的大小
        canvasNode.width = 800;
        canvasNode.height= 600;
        //3.获取绘图上下文（绘图环境）
        canvasNode.getContext('2d');  //2d
        //4.绘制图形  线，矩形 园


    })();

1.4Canvas坐标系

canvas坐标系，从最左上角0,0开始。x向右增大， y向下增大

2Canvas路径

2.1绘制起点

ctx.moveTo(x, y)

绘制起点：ctx.moveTo(x, y); //x,y 都是相对于 canvas盒子的最左上角。

2.2绘制终点

ctx.lineTo(x, y)

绘制终点：ctx.lineTo(x, y); //从x,y的位置绘制一条直线到起点或者上一个线头点。

2.3开始路径

ctx.beginPath()

开始路径：ctx.beginPath();作用：将当路径和之前路径隔离,方便你对当前路径进行设置样式,线宽.

2.4闭合路径

ctx.closePath()

闭合路径：ctx.closePath();作用：闭合路径会自动把最后的线头和开始的线头连在一起。

2.4路径描边

ctx.stroke();

描边：ctx.stroke();

2.5 路径填充

//填充
cxt.fillStyle ="green";
cxt.fill();

2.6矩形路径

2.6.1普通矩形

cxt.rect(100,100,100,50);//x,y,w,h

需要开启何闭合路径

//开启路径 绘制矩形
cxt.beginPath();
cxt.rect(100,100,100,50);
//填充
cxt.fillStyle = "red";
cxt.fill();

//开启路径 绘制矩形
cxt.beginPath();

2.6.2快速填充

cxt.strokeRect(100,100,200,100);//x,y,w,h

不需要开启何闭合路径

//开启路径 绘制矩形

cxt.lineWidth = 6;
cxt.strokeStyle = "green";
cxt.fillStyle = "blue";

cxt.strokeRect(100,100,200,100);

2.6.3清除矩形工具

cxt.clearRect(100,100,200,100);//x,y,w,h


 //用途:清空整个画布  
cxt.clearRect(0,0,canvasNode.width,canvasNode.height);

  cxt.lineWidth = 6;
  cxt.strokeStyle = "green";
  cxt.fillStyle = "blue";

  cxt.strokeRect(300,400,200,100);
  //快速填充
  cxt.fillRect(100,100,200,100);

  //指定清除范围   删除指定的矩形区域
//  cxt.clearRect(100,100,50,500);
  cxt.clearRect(100,100,200,100);

3圆

3.1arc的用法

cxt.arc(200,200,100,0,Math.PI*2,true);//x,y,r,s,e,c

arc: 弧（度）弧形物；天穹英 [ɑːk] 美 [ɑrk]
counter 反击，还击；反向移动，对着干；反驳，回答 ['kaʊntə] 美 ['kaʊntɚ]
x,y：圆心坐标。
r：半径大小。
s:绘制开始的角度。圆心到最右边点是0度，顺时针方向弧度增大。
e:结束的角度，注意是弧度。π
c：是否是逆时针。true是逆时针，false：顺时针(默认)
弧度和角度的转换公式： rad = deg*Math.PI/180;
在Math提供的方法中sin、cos等都使用的弧度

3.2三角函数的补充:

x =x0 + Math.cos(rad) * R;//x0和y0是圆心点坐标
y =y0 + Math.sin(rad) * R;//注意都是弧度

4切线

cxt.arcTo(300,100,300,150,50);//x1,y1,x2,y2,radius

这个函数以给定的半径绘制一条弧线，圆弧的起点与当前路径的位置到(x1, y1)点的直线相切，圆弧的终点与(x1, y1)点到(x2, y2)的直线相切。因此其通常配合moveTo()或lineTo()使用。其能力是可以被更为简单的arc()替代的，其复杂就复杂在绘制方法上使用了切点。

5路径样式

5.1设置路径的末端

cxt.lineCap='butt';//默认
 cxt.lineCap='round';//圆形
 cxt.lineCap='square';

5.2设置连接处的样式

cxt.lineJoin = "miter"; //默认
cxt.lineJoin = "bevel";
cxt.lineJoin = "round";// 圆形

6签名板案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            display: block;
            margin: 0 auto;
            background-color: #CCCCCC;
        }
    </style>
</head>
<body>
<!--行内快元素-->
<canvas id="myCanvas" width="400px" height="300px">
    您的浏览器不支持
</canvas>
<script>
    /*
    * 鼠标后去位置
    * clientX   clientY    视口上的位置
    * offsetX  offsetY     在所在元素上的位置
    * pageX  pageY          视口上的位置，但要考虑滚动条的区域
    *
    * screenX  screenY     鼠标在屏幕上的位置（不变）
    *
    * */
    (function f() {
        //第一步:获取canvas元素
        var canvasNode = document.querySelector("#myCanvas");
        //第二步  设置画布的大小
        canvasNode.width = 800;
        canvasNode.height= 600;
        //3.获取绘图上下文（绘图环境）
        var cxt= canvasNode.getContext('2d');  //2d
        //绑定鼠标按下事件
        canvasNode.οnmοusedοwn=function (event ){
            //开启路径
            cxt.beginPath();
            //设置路径起点
            cxt.moveTo(event.offsetX, event.offsetY);

            //绑定鼠标移动事件
            document.onmousemove = function (event) {
                //设置连接点
                cxt.lineTo(event.clientX - canvasNode.offsetLeft, event.clientY -canvasNode.offsetTop);
                //描边
                cxt.stroke();

            }

            //鼠标抬起事件
            document.onmouseup = function () {
                this.onmousemove =null;
            }
        }




    })();
</script>


</body>
</html>

7五边形案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            display: block;
            margin: 0 auto;
            background-color: #CCCCCC;
        }
    </style>
</head>
<body>
<!--行内快元素-->
<canvas id="myCanvas" width="400px" height="300px">
    您的浏览器不支持
</canvas>
<script>
    /*
    * 鼠标后去位置
    * clientX   clientY    视口上的位置
    * offsetX  offsetY     在所在元素上的位置
    * pageX  pageY          视口上的位置，但要考虑滚动条的区域
    *
    * screenX  screenY     鼠标在屏幕上的位置（不变）
    *
    * */
    (function f() {
        //第一步:获取canvas元素
        var canvasNode = document.querySelector("#myCanvas");
        //第二步  设置画布的大小
        canvasNode.width = 800;
        canvasNode.height= 600;
        //3.获取绘图上下文（绘图环境）
        var cxt= canvasNode.getContext('2d');  //2d

        var x = 400 , y = 300 ;//设置中心坐标

        var r =100;   //中心到顶点的距离
        //开启路径
        cxt.beginPath();
        for(var i=0;i< 5;i++){
            var angle = (18+72*i)/180*Math.PI;
            var pointX = x + r*Math.cos(angle);
            var pointY = y + r*Math.sin(angle);
            cxt.lineTo(pointX,pointY)
        }
        //闭合回路
        cxt.closePath();
        // 描边
        cxt.stroke();
    })();
</script>
</body>
</html>

8五角星案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            display: block;
            margin: 0 auto;
            background-color: #CCCCCC;
        }
    </style>
</head>
<body>
<!--行内快元素-->
<canvas id="myCanvas" width="400px" height="300px">
    您的浏览器不支持
</canvas>
<script>
    /*
    * 鼠标后去位置
    * clientX   clientY    视口上的位置
    * offsetX  offsetY     在所在元素上的位置
    * pageX  pageY          视口上的位置，但要考虑滚动条的区域
    *
    * screenX  screenY     鼠标在屏幕上的位置（不变）
    *
    * */
    (function f() {
        //第一步:获取canvas元素
        var canvasNode = document.querySelector("#myCanvas");
        //第二步  设置画布的大小
        canvasNode.width = 800;
        canvasNode.height= 600;
        //3.获取绘图上下文（绘图环境）
        var cxt= canvasNode.getContext('2d');  //2d

        var x = 400 , y = 300 ;//设置中心坐标

        var r1=100,  r2 =40;   //中心到顶点的距离(半径)
        //开启路径
        cxt.beginPath();
        for(var i=0;i< 5;i++){
            var angle = (18+72*i)/180*Math.PI;
            var angle1 = (54+72*i)/180*Math.PI;
            var pointX = x + r1*Math.cos(angle) ;
            var pointY = y - r1*Math.sin(angle);
            var pointXX = x + r2*Math.cos(angle1) ;
            var pointYY = y - r2*Math.sin(angle1);
            cxt.lineTo(pointX,pointY);
            cxt.lineTo(pointXX,pointYY);
        }
        //闭合回路
        cxt.closePath();
        // 描边
        cxt.fillStyle ="red"
        cxt.fill();
        cxt.strokeStyle ="yellow";
        cxt.stroke();
    })();
</script>

</body>
</html>

9任意多边形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            display: block;
            margin: 0 auto;
            background-color: #CCCCCC;
        }
    </style>
</head>
<body>
<!--行内快元素-->
<canvas id="myCanvas" width="400px" height="300px">
    您的浏览器不支持
</canvas>
<script>
    /*
    * 鼠标后去位置
    * clientX   clientY    视口上的位置
    * offsetX  offsetY     在所在元素上的位置
    * pageX  pageY          视口上的位置，但要考虑滚动条的区域
    *
    * screenX  screenY     鼠标在屏幕上的位置（不变）
    *
    * */
    (function f() {
        //第一步:获取canvas元素
        var canvasNode = document.querySelector("#myCanvas");
        //第二步  设置画布的大小
        canvasNode.width = 800;
        canvasNode.height= 600;
        //3.获取绘图上下文（绘图环境）
        var ctx= canvasNode.getContext('2d');  //2d
        /*
        * ctx    上下文
        * nums  边数量
        * */
        poly(ctx,150,130,100);
        function poly(ctx,x,y,r,nums=5,strokeColor="#000",strokeWidth=2,fillColor="transparent") {
            var angleChane = 360/nums;
            ctx.beginPath();
            for(var i=0;i< nums;i++) {
                var angle = (90+angleChane*i)/180*Math.PI;
                var pointX = x + r*Math.cos(angle) ;
                var pointY = y - r*Math.sin(angle);
                ctx.lineTo(pointX,pointY);
            }
           ctx.closePath();

            ctx.lineWidth =strokeWidth;
            ctx.strokeStyle = strokeColor;
            ctx.fillStyle =fillColor;
            ctx.fill();
            ctx.stroke();
        }

    })();
</script>


</body>
</html>

10任意多角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            display: block;
            margin: 0 auto;
            background-color: #CCCCCC;
        }
    </style>
</head>
<body>
<!--行内快元素-->
<canvas id="myCanvas" width="400px" height="300px">
    您的浏览器不支持
</canvas>
<script>
    /*
    * 鼠标后去位置
    * clientX   clientY    视口上的位置
    * offsetX  offsetY     在所在元素上的位置
    * pageX  pageY          视口上的位置，但要考虑滚动条的区域
    *
    * screenX  screenY     鼠标在屏幕上的位置（不变）
    *
    * */
    (function f() {
        //第一步:获取canvas元素
        var canvasNode = document.querySelector("#myCanvas");
        //第二步  设置画布的大小
        canvasNode.width = 800;
        canvasNode.height= 600;
        //3.获取绘图上下文（绘图环境）
        var ctx= canvasNode.getContext('2d');  //2d
        /*
        * ctx    上下文
        * nums  边数量
        * */
        ctx.beginPath();
        ctx.arc(400,300,250,0,Math.PI*2);
        ctx.fillStyle = '#13007D';
        ctx.fill();
        ctx.stroke();
        star(ctx,400,300,200,120,12,'#ffffff',6,'#ffffff');

        ctx.beginPath();
        ctx.arc(400,300,120,0,Math.PI*2);
        ctx.strokeStyle ='#13007D';

        ctx.stroke();
        function star(ctx,x,y,r1,r2,nums=5,strokeColor="#000",strokeWidth=2,fillColor="transparent") {
            var angleChane = 360/nums;  //每次变化角度
            ctx.beginPath();
            for(var i=0;i< nums;i++) {
                var a1 = (90+angleChane*i)/180*Math.PI;//远端角
                var a2 = (90+angleChane/2+angleChane*i)/180*Math.PI;//近端角
                var pointX = x + r1*Math.cos(a1) ;
                var pointY = y - r1*Math.sin(a1);
                var pointXX = x + r2*Math.cos(a2) ;
                var pointYY = y - r2*Math.sin(a2);
                ctx.lineTo(pointX,pointY);
                ctx.lineTo(pointXX,pointYY);
            }
            ctx.closePath();

            ctx.lineWidth =strokeWidth;
            ctx.strokeStyle = strokeColor;
            ctx.fillStyle =fillColor;
            ctx.fill();
            ctx.stroke();
        }

    })();
</script>
</body>
</html>

11变换

11.1变换操作

ctx.translate(100,100);//位移
ctx.scale(0.25,0.25);//缩放
ctx.rotate(30/180*Math.PI); //旋转

变换的都是坐标系，对后面元素有影响

11.2绘图上下文的保存和恢复

//保存当前的绘图上下文
ctx.save();


//恢复保存的绘图上下文
ctx.restore();

两个一起使用，结合变换操作写代码
变换操作之前先保存，变换操作之后在恢复

安静宅男爱蓝猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas笔记

Canvas1.Canvas介绍1.1什么是Canvas定义：是HTML5提供的一种新标签, ie9才开始支持的，Canvas是一个矩形区域的画布，可以用JS控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。1.2Canvas主要应用的领域1 可视化数据：各类...
复制链接

扫一扫

专栏目录