canvas高级路径方法

最新推荐文章于 2024-11-08 08:52:41 发布
最新推荐文章于 2024-11-08 08:52:41 发布
阅读量1k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： web前端-动画图形 文章标签： canvas 路径
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42659625/article/details/82702313

接下来深入探讨一下其他绘制路径的方法，包括弧线和曲线，以组合成复杂的图像。

一、弧线

有4种函数可以绘制弧线和曲线，以组合成复杂的图像。

1.context.arc()

context.acr(x,y,radius,startAngle,endAngle,anticlockwise)

x和y定义圆心的位置 ，radius定义弧线的半径，startAngle,endAngle使用弧度值，而不是角度值。anticlockwise可以是true或是false这两个值，用于定义弧线的方向。

context.arc(100,100,20,(Math.PI/180)*0,(Math.PI/180)*360,false);

 圆弧示例完整代码如下：

<!DOCTYPE HTML>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <title>canvans</title>
    <script src="modernizr-custom.js"></script>
    <script type="text/javascript">
        //检测window是否加载完毕最终的代码
        window.addEventListener('load', eventWindowLoaded, false);

        function eventWindowLoaded() {
            canvasApp();
        }

        //检测是否支持canvas
        //使用modernizr.js
        function canvasSupport() {
            return Modernizr.canvas;
        }

        //
        function canvasApp() {
            if (!canvasSupport()) {
                return;
            } else {
                var theCanvas = document.getElementById("canvas"); //创建画布实例
                var context = theCanvas.getContext("2d"); //获得2D上下文
            }
            drawScreen();

            function drawScreen() {
                context.beginPath();
                context.strokeStyle = 'black';
                context.lineWidth = 10;
                // context.arc(200, 200, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
                context.arc(200, 200, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 90, false); //4分之一圆
                context.arc(200, 200, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 270, false); //4分之三圆
                //整圆
                context.stroke();
                context.closePath();
            }
        }
    </script>
</head>

<body>

    <canvas id="canvas" width="500" height="400">
                Your browser does not support the canvas element.
    </canvas>

</body>

</html>

2.context.arcTo()

这个函数以给定的半径绘制一条弧线，圆弧的起点与当前路径的位置到(x1,y1)点的直线相切，圆弧的终点 与(x1,y1)到(x2,y2)的直线相切。

context.arcTo(350, 350, 100, 100, 20);

如下图：

完整案例代码如下：

<!DOCTYPE HTML>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <title>canvans</title>
    <script src="modernizr-custom.js"></script>
    <script type="text/javascript">
        //检测window是否加载完毕最终的代码
        window.addEventListener('load', eventWindowLoaded, false);

        function eventWindowLoaded() {
            canvasApp();
        }

        //检测是否支持canvas
        //使用modernizr.js
        function canvasSupport() {
            return Modernizr.canvas;
        }

        //
        function canvasApp() {
            if (!canvasSupport()) {
                return;
            } else {
                var theCanvas = document.getElementById("canvas"); //创建画布实例
                var context = theCanvas.getContext("2d"); //获得2D上下文
            }
            drawScreen();

            function drawScreen() {
                context.beginPath();
                context.strokeStyle = 'black';
                context.lineWidth = 10;
                
                context.moveTo(0, 0);
                context.lineTo(100, 200);
                context.arcTo(350, 350, 100, 100, 20);
                
                context.stroke();
                context.closePath();

            }
        }
    </script>
</head>

<body>

    <canvas id="canvas" width="500" height="400">
                Your browser does not support the canvas element.
    </canvas>

</body>

</html>

3.贝塞尔曲线

 贝塞尔曲线要比弧线灵活得多，它有立方和平方两种形式

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
context.quadraticCurveTo(cpx, cpy, x, y);
context.moveTo(0, 0);
context.quadraticCurveTo(100, 25, 0, 50);

这条曲线从(0,0)开始，到(0,50)结束，用来创建弧线位于(100,25),这个点大致上是圆弧的 圆心。控制点x值100弧线拉伸成一个细长的曲线。

简单平方贝赛尔曲线， 如下：

function drawScreen() {
                context.beginPath();
                context.strokeStyle = 'black';
                context.lineWidth = 10;

                context.moveTo(150, 0); // *
                context.bezierCurveTo(0, 125, 300, 175, 150, 300); // *



                context.stroke();
                context.closePath();

            }

3.canvas裁切区域

<!DOCTYPE HTML>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <title>canvans</title>
    <script src="modernizr-custom.js"></script>
    <script type="text/javascript">
        //检测window是否加载完毕最终的代码
        window.addEventListener('load', eventWindowLoaded, false);

        function eventWindowLoaded() {
            canvasApp();
        }

        //检测是否支持canvas
        //使用modernizr.js
        function canvasSupport() {
            return Modernizr.canvas;
        }

        //
        function canvasApp() {
            if (!canvasSupport()) {
                return;
            } else {
                var theCanvas = document.getElementById("canvas"); //创建画布实例
                var context = theCanvas.getContext("2d"); //获得2D上下文
            }
            drawScreen();

            function drawScreen() {
                //在屏幕上画方块
                context.fillStyle = 'black';
                context.fillRect(10, 10, 200, 200);
                context.save();
                context.beginPath();

                //裁切画布从(0,0)点至50*50的正方形
                context.rect(0, 0, 50, 50);
                context.clip();

                //红色圈
                context.beginPath();
                context.strokeStyle = 'red';
                context.lineWidth = 5;
                context.arc(100, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
                context.stroke();
                context.closePath();

                context.restore();

                //再次裁切整个画布
                context.beginPath();
                context.rect(0, 0, 500, 500);
                context.clip();

                //绘制没有裁切的蓝线
                context.beginPath();
                context.strokeStyle = "blue";
                context.lineWidth = 5;
                context.arc(100, 100, 50, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
                //整圆
                context.stroke();
                context.closePath();
            }
        }
    </script>
</head>

<body>

    <canvas id="canvas" width="500" height="400">
                Your browser does not support the canvas element.
    </canvas>

</body>

</html>

 

canvas路径剪裁clip（图文示例）
大剑师兰特的GIS世界
02-02 1924
canvas如何路径剪裁呢？clip()表示路径剪裁。使用时候，先绘制剪裁路径，执行clip()方法，再绘制的内容就在这个剪裁路径中呈现。
canvas教程5-绘制路径
William_fang的博客
07-26 1276
文章目录一.绘制不规则图形的思路1.需要设置路径起点2.使用绘制命令画出路径3.封闭路径4.填充或者绘制已经封闭路径的形状二.源码三.图形解释篇章 一.绘制不规则图形的思路 绘制路径的作用：为了设置一个不规则的多边形状态。 路径是闭合的，需要按照规定的步骤进行绘制。步骤如下： 1.需要设置路径起点 开始路径。 ctx.beginPath(); 2.使用绘制命令画出路径 ①移动绘制点。 ctx.moveTo(x,y); ②描述绘制路径。 ctx.lineTo(x,y); ③再次描述路径。 ctx.lin
canvas画布曲线（贝塞尔曲线）优化
weixin_46465090的博客
07-02 456
上一篇文章小汪写到用canvas实现画板的功能，但是思前想后在曲线上有一定的问题，点我去看上篇canvas画板。由于我把自己代入了角色，但作为用户的感官不应该是这样子的。 二次贝塞尔曲线canvas手册在描述中讲出： 也就是需要得到起始点，控制点，结束点，从而自动绘制出相切切角的曲线。 而小汪在上篇的案例中实际效果为： 也就是说 用户在一开始可能并不知道这是贝塞尔曲线，即便给出相应点位也应该把操作点2通过计算改变位置才对。 所以我做出了修改，改成用户拖拽画贝塞尔曲线。 思路：起始点在用户手指/鼠标点击时
你必须知道的10个提高Canvas性能技巧
weixin_34306593的博客
03-15 136
你还在抱怨自己写的canvas demo徘徊在10帧以下吗？你还在烦恼打开自己写的应用就听见CUP风扇转吗？你正在写一个javascript Canvas库吗？那么下面九点就是你必须知道的！ 一.预渲染 错误代码： var canvas = document.getElementById("myCanvas"); var context = this.canvas.getC...
12、canvas高级动画技巧
weixin_34195364的博客
07-12 147
2019独角兽企业重金招聘Python工程师标准>>> ...
Canvas高阶使用技巧-变换，状态保存，离屏缓冲，粒子爆炸效果，实际案例操作
Lbsssss的博客
07-15 693
Canvas高阶使用技巧-变换，状态保存，离屏缓冲，粒子爆炸效果，实际案例操作
1.2.3Canvas高阶使用技巧-变换，状态保存，离屏缓冲，粒子特效
雨一直下
03-05 315
本片文章讲解Canvas的高级使用，可以参考这篇文章：https://www.cnblogs.com/tianzhijiexian/p/4300988.html Canvas所提供的各种方法根据功能来看大致可以分为几类： 第一是以drawXXX为主的绘制方法； 第二是以clipXXX为主的裁剪方法； 第三是以scale、skew、translate和rotate组成的Canvas变换方法；...
HTML5 Canvas钢笔路径动画特效.zip
07-04
Canvas API的核心是两个主要的方法：`fill()` 和 `stroke()`，它们分别用于填充路径和描边路径。在钢笔路径动画中，开发者通常会使用`beginPath()`来开启一个新的路径，接着用`moveTo()`和`lineTo()`等方法定义路径...
2.34 路径方向和剪纸效果｜Canvas高级内容｜Canvas图形、动画、游戏开发从入门到精通全系列课程
08-31
2.34_路径方向和剪纸效果｜Canvas高级内容｜Canvas图形、动画、游戏开发从入门到精通全系列课程
canvas 如何绘制线段的实现方法
12-14
在HTML5中，Canvas是一个非常重要的元素，它允许开发者在网页上进行动态图像绘制。...随着实践的深入，还可以探索更多高级特性，如阴影效果、路径操作、渐变和模式填充等，从而实现更多富有创意的视觉效果。
10个提高Canvas性能技巧
06-23
10个提高Canvas性能技巧 很好的 我自己在用的
Canvas使用技巧
小强的博客
01-03 1264
Canvas使用技巧  安卓系统提供了许多方便开发者的组件，比如TextView和ImageView等，它们的组合可以迎合实现大部分一般生产环境的需求，无论是数据展示还是页面交互，只要合理运用这些原生组件或者一些通过重写原生组件达到拓展功能的第三方组件便可以实现要求。   但是偶尔在编写应用时会遇到原生组件无论怎么组合都难以实现需求的情况，而且也不能用这个当理由去怼设计和产品人员，因为往往这样的设
canvas使用技巧大全
weixin_34138139的博客
08-27 251
1.基本知识 1.1 canvas的基本知识 canvas元素的大小和绘图表面的大小 canvas绘图环境及保存和回复 基本绘制操作 事件处理 1.1.1 canvas 基本知识 canvas是html5元素中功能最强大的一个。这种强大的能力是通过canvas的context对象表现出来的。它提供一套完成的绘图功能，从而使我们可以使用javascript可以操作他们。 我们能用Canvas做...
Canvas中点到点的路径运动
weixin_33862993的博客
09-07 545
/*随机生成两个点，然后以两点为端点，进行运动，主要使用了SetInterval,对画布进行不断的擦除描绘的操作*/1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" c...
Canvas入门到高级详解(下)
derfyfxh588690的博客
02-21 370
四、 Canvas 开发库封装 4.1 封装常用的绘制函数 4.1.1 封装一个矩形 //思考：我们用到的矩形需要哪些绘制的东西呢？ 矩形的 x、y坐标 矩形的宽高 矩形的边框的线条样式、线条宽度 矩形填充的样式 矩形的旋转角度 矩形的缩小放大 //下面是把上面所有的功能进行封装的代码： function ItcastRect( option ) {//矩形...
Canvas 第四章 创建路径
涛涛的博客
10-04 199
第四章 创建路径 <canvas height="500" width="500" id="canvas"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); // canvas.beginPath(); // canvas.rect(10,10,150,150); // canva
学习 canvas （三） 常用的绘图技巧
小小的前端
06-03 416
图像填充 canvas 除了使用颜色填充形状，也可以通过定义图案来填充形状。 <!DOCTYPE html> <html lang="en"> <body> <canvas width="500" height="500" id="canvas"></canvas> <script type="text/javascript"> // 获取元素DOM var canvas = document
Canvas系统学习 - 全面教程
最新发布
YunWisdom
11-08 4340
什么是 CanvasCanvas 的应用场景在浏览器中使用 Canvas 的方法1. 什么是 CanvasCanvas 呢，就像是一块可以在网页上画画的神奇 “画布”。它是 HTML5 中新增的一个元素，可以通过 JavaScript 来在上面绘制各种图形、图像和动画。它可以让网页变得更加生动有趣，不再只是单调的文字和图片。简单来说，Canvas 提供了一种在网页上进行图形绘制的强大工具，让开发者能够自由地创造各种视觉效果。2. Canvas 的应用场景。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值