萌新的Canvas笔记（四）

最新推荐文章于 2022-05-10 12:25:06 发布
最新推荐文章于 2022-05-10 12:25:06 发布
阅读量339 收藏
点赞数
分类专栏： 前端大法好 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20417227/article/details/52082490
版权
前言

今天我的小伙伴硬是怼出了一个坦克大战秀给我看，让我亚历山大，更加坚定了发愤图强的决心。。。TI6在即，然而也没有多少时间看胖头鱼吹牛了。

关于曲线的绘制

arc(x, y, radius, startAngle, endAngle, anticlockwise =false)

用于绘制一个圆弧，参数依次表示：x坐标 y坐标 半径 圆弧开始位置 圆弧结束位置 最后一个参数默认表示顺时针方向，如果为true 则为逆时针

画一个圆角矩形

在CSS中，可以用border-radius属性来让矩形的四个角变成圆角。其实也可以用canvas实现。
这里写图片描述

通过简单分析，可以知道绘制这样一个圆角矩形需要的参数是：
宽度，高度，小圆的半径，以及绘制的位置和context。
实现方法，从右下角开始（也可以从左上角），找到右下角圆心，顺时针绘制一个四分之一圆弧，再绘制一条直线到左下角，再绘制一个四分之一圆弧，再绘制一条直线到左上角……以此类推；
代码：

    function drawRoundRect(cxt, x, y, width, height, radius,/*option*/linewidth, /*option*/linecolor){
                cxt.save();

                cxt.translate(x, y);
                pathRoundRect(cxt, width, height, radius);

                cxt.lineWidth = linewidth || 1;
                cxt.strokeStyle = linecolor ||"black";
                cxt.stroke();
                cxt.restore();
            }

    function pathRoundRect(cxt, width, height, radius){
                cxt.beginPath();

                cxt.arc(width - radius, height - radius, radius, 0, Math.PI/2);
                cxt.lineTo(width - radius, height); 

                cxt.arc(radius, height - radius, radius, Math.PI/2, Math.PI);
                cxt.lineTo(0, radius);

                cxt.arc(radius, radius, radius, Math.PI, Math.PI/2 * 3);    
                cxt.lineTo(width - radius, 0);

                cxt.arc(width - radius, radius, radius, Math.PI/2 * 3, Math.PI * 2);

                cxt.closePath();

            }

流程:
先平移坐标轴到指定位置，再开始绘制路径。绘制路径函数为pathRoundRect();
主要为这两个函数，稍微修改一下，就可以绘制2048游戏的矩形图。

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>绘制圆角矩形</title>
    </head>
    <body>
        <canvas id="canvas" width="" height="">
            您的浏览器不支持canvas
        </canvas>
    </body>
    <script type="text/javascript">
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            canvas.width = 800;
            canvas.height = 800;

            //drawRoundRect(context, 100, 100, 600, 500, 50);

            fillRoundRect(context, 150, 150, 500, 500, 10, "#bbada0");

            for(var i = 0; i < 4; i ++){
                for(var j = 0; j < 4; j ++){
                    fillRoundRect(context, 170 + i * 120, 170 + j * 120, 100, 100, 6, "#ccc0b3");

                }
            }
            function drawRoundRect(cxt, x, y, width, height, radius,/*option*/linewidth, /*option*/linecolor){
                cxt.save();

                cxt.translate(x, y);
                pathRoundRect(cxt, width, height, radius);

                cxt.lineWidth = linewidth || 1;
                cxt.strokeStyle = linecolor ||"black";
                cxt.stroke();
                cxt.restore();
            }

            function fillRoundRect(cxt, x, y, width, height, radius, /*option*/fillcolor){
                cxt.save();

                cxt.translate(x, y);
                pathRoundRect(cxt, width, height, radius);

                cxt.fillStyle = fillcolor || "black";
                cxt.fill();
                cxt.restore();
            }

            function pathRoundRect(cxt, width, height, radius){
                cxt.beginPath();

                cxt.arc(width - radius, height - radius, radius, 0, Math.PI/2);
                cxt.lineTo(width - radius, height); 

                cxt.arc(radius, height - radius, radius, Math.PI/2, Math.PI);
                cxt.lineTo(0, radius);

                cxt.arc(radius, radius, radius, Math.PI, Math.PI/2 * 3);    
                cxt.lineTo(width - radius, 0);

                cxt.arc(width - radius, radius, radius, Math.PI/2 * 3, Math.PI * 2);

                cxt.closePath();

            }


    </script>
</html>

效果：
这里写图片描述
其中小方块的位置需要计算一下，也不复杂。注意间隔为20个像素，小方块长宽为100，圆角半径为6. 知道这些参数以后就可以轻易计算出每个的位置。

一个不好用的函数 arcTo

同样的是用来绘制一段弧，与arc不同的是，所需要的参数不一样，绘制原理也不一样。简单来说，这玩意就是 
    以当前的点为初始值，以参数中的第一个点连接，第一个点与第二个点连接。
    绘制一条半径为radius的与这两条线段相切的弧

有点晕？
来看代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>arcTo--一个不怎么好用的函数。。</title>
    </head>
    <body>
        <canvas id="canvas" width="" height=""></canvas>
    </body>
    <script type="text/javascript">
    //arcTo(x1, y1, x2, y2, radius)   
    //以当前的点为初始值，以参数中的第一个点连接，第一个点与第二个点连接。
    //绘制一条半径为radius的与这两条线段相切的弧
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        canvas.width = 800;
        canvas.height = 800;

        context.save();
        context.beginPath();

        context.moveTo(150, 150);
        context.arcTo(650, 150, 650, 650, 300);

        context.lineWidth = 6;
        context.strokeStyle = "red";
        context.stroke();

        context.closePath();
        context.restore();

        context.beginPath();

        context.moveTo(150, 150);
        context.lineTo(650, 150);
        context.lineTo(650, 650);

        context.stroke();

        context.closePath();

    </script>
</html>

效果：
这里写图片描述
就是这样，会以这两条线段为切线，作一段半径为radius的弧。
起始位置是当前的画笔位置，而不是切线位置。
当然，如果起始位置过劲，则会反向寻找切点。所以线段的长度并不重要。

重头戏-贝塞尔曲线

贝塞尔曲线是一种应用广泛的曲线。能够绘制出任意的、不规则的弧。

函数：
context.quadraticCurveTo(x1, y1, x2, y2);

与arcTo不同的是，他不需要指定弧的半径，而且起始点与终止点就是弧的起始点与终止点。

与arcTo相同的是，他的起始点都是当前画笔所在的点。
例：

        context.beginPath();
        context.moveTo(100, 100);
        context.quadraticCurveTo(400, 400, 100, 500);
        context.stroke();

效果：
这里写图片描述

附上视频中推荐的贝塞尔曲线的交互式网址 http://tinvurl.com/html5quadratic
反正我是打不开。

贝塞尔三次曲线

与二次曲线的区别是，三次曲线拥有两个控制点，而二次曲线只有一个控制点。
这使得贝塞尔三次曲线可以更加灵活的绘制弧。

        context.beginPath();
        context.moveTo(100, 100);
        context.bezierCurveTo(150, 50, 200, 150, 250, 100);

效果：
这里写图片描述

至于具体的计算。。学过图形学的应该会，反正我不会，到时候慢慢调试就好。

以上~

PS：陆陆续续终于把曲线的部分结束了，接下来就是文字的渲染和高级内容了，加油~

Arya_1s
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Unity小技巧】在Unity中实现类似书的功能（附git源码）
向宇
08-25 777
欢迎来到游戏的书籍之门，一个充满魔力和想象力的世界。在这里，你将体验到一种全新的游戏界面交互方式——翻书。通过Unity引擎的强大功能，我们成功地将书籍的神奇氛围融入到游戏中，为玩家带来了一种崭新、富有艺术感的页面选择方式。你可以把这个效果用在任何地方，比如关卡选择，商店，故事介绍，物品背包，成就页面等等，这能极大的丰富你的游戏。无疑，游戏UI交互是极为重要的，对比死板的页面，他能给玩家一种新颖感，让你的游戏在一开始就抓住每个玩家的心！
canvas 学习指南
最新发布
qq_34185872的博客
03-03 483
如果在 CSS 样式中定义，我们使用 canvas 对象获取的宽度和高度是默认值，而不是实际的宽度和高度。这样就无法获取 canvas 对象正确的宽度和高度。获取 canvas 对象实际的宽度和高度是 Canvas 开发中最常用的操作，因此对于 Canvas 的宽度和高度我们就一定要在 HTML 属性中定义，而不是在 CSS 属性中定义。
canvas之十字架，beginPath()的作用
qq_43411412的博客
05-25 1939
本次我们主要讲两点：一点是如何绘制十字架，另一点是beginPath()的作用。 用canvas绘制十字架并不难，首先我们要对其必要的元素坐标胸有成竹，我们可以在画板上画出并标出必要地方的元素坐标，如下所示（右侧是坐标轴）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
朝阳39的博客
04-24 1727
渐变 线性渐变 在一条直线上进行渐变 调用createLinearGradient()方法创建一个linearGradient对象 var gnt = cxt.createLinearGradient(x1, y1, x2, y2); x1、y1表示渐变色开始点的坐标 x2、y2表示渐变色结束点的坐标 添加渐变（开始） gnt.addColorStop(value1,color1); value1 渐变开始的位置，取值 0~1 color1 渐变开始的颜色 添加渐变（结.
HTML5中canvas中的beginPath()和closePath()的重要性
09-22
主要介绍了HTML5中canvas中的beginPath()和closePath()的重要性,需要的朋友可以参考下
html5基础入门教程之canvas绘制图形
m0_70646869的博客
05-10 757
moveTo(x,y) moveTo()方法用于定位绘画的位置，即将点移动到参数x,y所指定的坐标位置。 canvas初始化或者调用了beginPath()方法时，绘画开始的位置即原点(0,0)，使用moveTo()方法，我们可以将起始位置移动到任何我们想要的地方。 moveTo()的使用实例： function draw(){ var canvas=document.getElementById(‘test_moveTo’); if(canvas.getContext){ var cxt=canvas.
安卓自定义View进阶-Canvas之图片文字
热门推荐
GcsSloop
02-12 1万+
在上一篇文章 Canvas 之画布操作中我们了解了画布的一些基本操作方法，本次了解一些绘制图片文字相关的内容。如果你对前几篇文章讲述的内容熟练掌握的话，那么恭喜你，本篇结束之后，大部分的自定义 View 已经难不倒你了，当然了，这并不是终点，接下来还会有更加炫酷的技能。
2022年Android开发学习路线，714页PDF的鸿蒙学习笔记,
m0_67615803的博客
03-30 563
知识点的准备上： java基础： 主要考察的点在各种关键字，容器类，多线程相关类，gc相关知识，jvm内存模型。 android基础： 主要考察 四大组件, Handler机制，常用类如sharedPreference，intentService, 自定义view，view点击事件传递，binder机制。 计网: 详细点看一下tcp，udp相关的点，其他知识有个概念即可。 数据结构： 常用数据结构要掌握。 算法： 掌握剑指offer就差不多了。 设计模式： 掌握几种常用设计模式即可…至今只被问了单例和修饰者
b站唐老师人工智能基础知识笔记
qq_45064049的博客
08-19 1693
机器学习1.机器学习概述1.1.人工智能概述1.2.人工智能发展历程1.3.人工智能主要分支1.4.机器学习工作流程1.5.机器学习算法分类1.6.模型评估1.7.1.8.深度学习间接[了解]2.机器学习基础环境安装与使用3.4.Numpy5.Pandas 1.机器学习概述 1.1.人工智能概述 1.2.人工智能发展历程 1.3.人工智能主要分支 1.4.机器学习工作流程 1.5.机器学习算法分类 1.6.模型评估 1.7. 1.8.深度学习间接[了解] 2.机器学习基础环境安装与使用 3. 4.Numpy
HTML5零基础速成入门.rar
08-05
在这个压缩包中的“HTML5零基础速成入门.docx”文档，可能会涵盖这些基础知识点的讲解，通过阅读和实践，萌新们可以快速掌握HTML5的基本技能，从而踏入前端开发的大门。同时，结合“资源达人分享计划”的标签，这个...
Canvas标签使用实例
princess_prince的专栏
03-13 171
&lt;!doctype html&gt;&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt;  &lt;canvas width="500" height="800" style="background:yellow"  id="canvas"&gt;   您的浏览器当前版本不支持c
【Html5每日练习】canvas beginPath()的理解
boia
04-11 1万+
路径是canvas里很重要的一个概念，刚开始学canvas的人对路径理解不是很深，他们在用canvas的时候会乱用beginPath(),今天做了一个小demo来说明一下路径 看代码: var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); con
html坐标绘制路径,html5之Canvas路径绘图、坐标变换应用实例
weixin_34585343的博客
05-30 225
在上一篇中我们了解html5的canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移(translate)和旋转变换(ratate)，以及html5 canvas的路径绘图，beginpath，closepath，rect，arc等，还有就是html5 canvas路径绘图重要的绘图状态的保存和恢复机制，save，restore。多的也不说了，直接上...
在canvas上一些常见属性
qq_30668579的博客
10-14 1425
以绘制矩形为例 绘制一个只有边框的矩形： var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.strokeStyle = "blue"; cxt.rect(20,10,150,75); cxt.stroke(); c.getContext("2d
ctx.beginPath()开始新路径
Charlie8915的博客
02-22 2602
beginPath() 方法开始一条路径，或重置当前的路径。 提示：请使用这些方法来创建路径 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc()。 提示：请使用stroke()方法在画布上绘制确切的路径 JavaScript 语法： context.beginPath(); ...
[HTML5]canvas元素中beginPath()方法
xuyjun的博客
01-10 9300
在我初次接触canvas元素中的beginPath()方法时感到很不解，由此总在绘图前加上beginPath()方法，似乎这也是不错的。 但是理解beginPath()方法的机理也未尝不是坏事，下面我将结合网上搜寻的资料以及亲身试验，来讲述这个方法的用途。 首先我们先看一下画布绘图的过程是怎样的。一般来说，我们在画画之前，可以现在画纸上绘制出一幅草稿图，在完成之时我们才把图形描边出来和填充颜色
html5打开时钟代码,HTML5时钟代码
weixin_36417344的博客
06-09 372
HTML5智能时钟您的浏览器不支持canvas标签，请更换浏览器var clock=document.getElementById('clock');var cxt=clock.getContext('2d');function drawClock(){//清除画布cxt.clearRect(0,0,500,500);var now=new Date();var sec=now.getSecond...
手势密码的h5实现参考
pilihou的专栏
10-30 1229
手势密码的h5实现参考html代码<html> <head lang="en"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/> <meta charset="UTF-8"> <title>
关于canvas绘制线性圆角矩形，不是背景色填充类型
currencyLee的博客
05-02 1万+
// 封装一个函数，将用来绘制圆角矩形 function drawRoundRect(cxt, x, y, width, height, radius){ cxt.beginPath(); cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); cxt.lineTo(width -...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值