萌新的Canvas笔记（五）

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

关于文字渲染

context.font、fillText与strokeText

简单来说，font指定字体的样式
fillText与strokeText指定这里写代码片字符串和文字的位置。
可以猜测，fillText将会填充出文字，而strokeText会把边框绘制出来。
可用strokeStyle与fillStyle指定绘制样式

    context.font = "bold 40px Arial";
    context.fillStyle = "#058";
    context.fillText("欢迎大家学习《Canvas绘图详解》！", 40, 100);

尝试使用之前学的渐变

var linearGrad = context.createLinearGradient(0, 0, 800, 0);
        linearGrad.addColorStop(0.0, "red");
        linearGrad.addColorStop(0.25, "orange");
        linearGrad.addColorStop(0.5, "yellow");
        linearGrad.addColorStop(0.75, "green");
        linearGrad.addColorStop(1.0, "purple");
context.fillStyle = linearGrad;
context.font = "bold 40px Arial";
context.fillText("欢迎大家学习《Canvas绘图详解》！", 40, 100);

效果：
这里写图片描述
也可用使用背景图片的方法

    <body>
        <canvas id="canvas" width="" height=""></canvas>    
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        canvas.width = 800;
        canvas.height = 800;


        var img = new Image();
        img.src = "zhuankuai.jpg";
        img.onload = function (){
            var pattern = context.createPattern(img, "repeat");
            context.fillStyle = pattern;
            context.font = "bold 40px Arial";
            context.fillText("欢迎大家学习《Canvas绘图详解》！", 40, 100);
            context.strokeText("欢迎大家学习《Canvas绘图详解》！", 40, 100);
        }


    </script>
</html>

效果：
这里写图片描述

实际上，fillText或strokeText还用第四个参数，【maxlen】，指定文字的最长宽度，单位是像素，当长度有限时，可以使用这个参数强制压缩文字。

    context.fillText("欢迎大家学习《Canvas绘图详解》！", 40, 100,200);
    context.strokeText("欢迎大家学习《Canvas绘图详解》！", 40, 100, 200);

效果：
这里写图片描述
如上，文字总长度被压缩成200个像素。

关于context.font的属性值有很多。。与CSS道理差不多，需要用到的时候再查询就好。

measureText(string).width

这个方法可以计算出字符串真正的长度

var stringWidth = measureText(string).width;

使用这个方法前，要对font属性进行设定。

好生气！ 辛辛苦苦写好的不小心X掉了。。。算了 剩下的简单再写一遍

shadow阴影

对于canvas来说，阴影效果也是一种状态，需要指明的参数有：
shadowColor
shadowOffsetX
shadowOffsetY
shadowBlur
本别是颜色，XY方向的阴影长度，以及模糊程度

globalAlpha

globalAlpha是一个全局属性，可以取的值为0~1，为所有绘制的图像增加透明度。

比如：

        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        canvas.width = 1200;
        canvas.height = 600;
        context.globalAlpha = 0.7;
        for(var i = 0; i < 100; i ++){

            context.beginPath();
            var r = ~~(Math.random()*255);
            var g = ~~(Math.random()*255);
            var b = ~~(Math.random()*255);

            var color = "rgb(" + r + "," + g + "," + b + ")";

            context.arc(~~(Math.random()*canvas.width), ~~(Math.random()*canvas.height), ~~(Math.random()*100), 0, 2*Math.PI);

            context.fillStyle = color;
            context.fill();

            context.closePath();
        }

效果：
这里写图片描述

globalCompositeOperation

globalCompositeOperation也是针对全局设置的，与上一个不同的是，这个属性更针对遮挡关系的效果。
demo1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
            #canvas{
                display: block;
                margin: 0px auto;
                border: 1px black solid;
            }
    </style>
    <body>
        <canvas id="canvas" width="" height=""></canvas>
        <div id="button">
            <a href="#">source-over</a>
            <a href="#">source-atop</a>
            <a href="#">source-in</a>
            <a href="#">source-out</a>
            <a href="#">destination-over</a>
            <a href="#">destination-atop</a>
            <a href="#">destination-in</a>
            <a href="#">destination-out</a>
            <a href="#">lighter</a>
            <a href="#">copy</a>
            <a href="#">xor</a>
        </div>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        canvas.width = 1200;
        canvas.height = 700;

        window.onload = function (){
            draw("source-over");
            var a = document.getElementById("button").getElementsByTagName("a");
                for(var i = 0; i < a.length; i ++){
                    a[i].onclick = function (){
                        draw(this.text);
                    }
                }
            }
        function draw(compositeStyle){
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.beginPath();

            context.fillStyle = "#058";
            context.font = "bold 40px Arial";
            context.textAlign = "center";
            context.fillText("globalCompositeOperationi = " + compositeStyle, canvas.width/2, 60);

            context.fillStyle = "blue";
            context.fillRect(300, 150, 500, 500);


            context.fillStyle = "red";
            context.globalCompositeOperation = compositeStyle;


            context.moveTo(700, 250);
            context.lineTo(1000, 750);
            context.lineTo(400, 750);
            context.fill();
            context.closePath();
        }
    </script>
</html>

运行这个代码就可以大概知道各个属性是什么意思。

demo2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
        <style type="text/css">
            #canvas{
                display: block;
                margin: 0px auto;
                border: 1px black solid;
            }
        </style>
    <body>
        <canvas id="canvas" width="" height=""></canvas>
    </body>
    <script type="text/javascript">

        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        canvas.width = 1200;
        canvas.height = 700;
        var balls = [];
        for(var i = 0; i < 100; i ++){
            var r = ~~(Math.random()*255);    
            var g = ~~(Math.random()*255);
            var b = ~~(Math.random()*255);
            var color = "rgb(" + r + "," + g + "," + b + ")";
            var radius = ~~(Math.random()*50 + 20);
            var aball = {
           radius:radius,
                x:Math.random()*(canvas.width - 2 * radius),
                y:Math.random()*(canvas.height - 2 * radius),
            color:color,
               vx:~~(Math.random() * 5 + 5) * Math.pow(-1, ~~(Math.random() * 3)),
               vy:~~(Math.random() * 5 + 5) * Math.pow(-1, ~~(Math.random() * 3))
            }
            balls[i] = aball;
        }

        setInterval(
            function () {
                draw(context);
                update();
            },
            50
        );

        function draw(cxt){

            var canvas = cxt.canvas;
            cxt.clearRect(0, 0, canvas.width, canvas.height);
            for(var i = 0; i < balls.length; i ++){
                cxt.globalCompositeOperation = "lighter";
                cxt.beginPath();
                cxt.arc(balls[i].x, balls[i].y, balls[i].radius, 0, 2 * Math.PI);
                cxt.fillStyle = balls[i].color;
                cxt.fill();
                cxt.closePath();
            }
        }
        function update(){

            for(var i = 0; i < balls.length; i ++){
                balls[i].x += balls[i].vx;
                balls[i].y += balls[i].vy;

                if(balls[i].y - balls[i].radius < 0){
                    balls[i].y = balls[i].radius;
                    balls[i].vy = -balls[i].vy;

                }
                if(balls[i].y + balls[i].radius > canvas.height){
                    balls[i].y = canvas.height - balls[i].radius;
                    balls[i].vy = -balls[i].vy;
                }
                if(balls[i].x - balls[i].radius < 0){
                    balls[i].x = balls[i].radius;
                    balls[i].vx = -balls[i].vx;
                }
                if(balls[i].x + balls[i].radius > canvas.width){
                    balls[i].x = canvas.width - balls[i].radius;
                    balls[i].vx = -balls[i].vx;
                }


            }

        }
    </script>
</html>

新增了动画，自行修改globalCompositeOperation的参数，更直观的看效果。
这里写图片描述

先这样。
以上！

Arya_1s
关注
专栏目录
CTFShow：萌新web1
weixin_64089259的博客
04-14 1028
第一次做web1题目，刚开始一脸懵逼，看了大佬的一些博客，才做出来，心里非常激动！
CTFSHOW【萌新计划】Writeup
abtgu的博客
05-16 3035
CTFSHOW【萌新计划】web1【萌新计划】web2【萌新计划】web3【萌新计划】web4【萌新计划】web5【萌新计划】web6【萌新计划】web7【萌新计划】web8【萌新计划】web9【萌新计划】web10【萌新计划】web11 【萌新计划】web1 题目： 代码很安全，没有漏洞。 解题思路： 题目代码 <html> <head> <title>ctf.show萌新计划web1</title> <meta charset="u
ctfshow 萌新计划 writeup1-8
qq_44893894的博客
10-22 545
ctfshow 萌新计划 writeup web1 题目：代码很安全，没有漏洞。 页面代码如下 <html> <head> <title>ctf.show萌新计划web1</title> <meta charset="utf-8"> </head> <body> <?php # 包含数据库连接文件 include("config.php"); # 判断get提交的参数id是否存在 if(isset($_
萌新的Canvas笔记(一)
Arya的博客
07-24 384
Canvas基础 前言 一放暑假本来要好好学习的，万万没想到跟基友打守望先锋根本停不下来，导致日夜颠倒。 都是暴雪的错！所幸历时十几天，今天终于调整回来，继续当一名爱学习的宝宝。 正片开始 首先获取到canvas节点后还需获取canvas的上下文环境 context = canvas.getContext(‘2d’) moveTo与lineTo moveTo(x
萌新的Canvas笔记（二）
Arya的博客
07-27 430
前言 在之前的绘制五角星的demo中，drawStar函数其实承载了两个功能，一个是对图形路径的绘制，一个是对缩放、平移等状态的绘制。实际上应该分成两部分，一部分是设置一个单位体积的星星形状，另一部分对星星的缩放、平移、旋转进行控制。图形变换位移 translate(x, y)旋转 rotate(deg)缩放 scale(sx, sy)以位移为例 context.translate(
萌新的Canvas笔记（六）
Arya的博客
08-17 463
初探clipcontext.clip() clip为裁剪区域，意思就是，当构建了一个封闭的路径后，进行clip操作，这个路径就会把canvas“裁剪”了，只针对这个区域的内容为可见，其余部分为不可见。 cxt.beginPath(); cxt.fillStyle = "black"; cxt.fillRect(0, 0, canvas.width, c
萌新的Canvas笔记（四）
Arya的博客
08-01 349
前言今天我的小伙伴硬是怼出了一个坦克大战秀给我看，让我亚历山大，更加坚定了发愤图强的决心。。。TI6在即，然而也没有多少时间看胖头鱼吹牛了。关于曲线的绘制arc(x, y, radius, startAngle, endAngle, anticlockwise =false)用于绘制一个圆弧，参数依次表示：x坐标 y坐标 半径 圆弧开始位置 圆弧结束位置 最后一个参数默认表示顺时针方向，如果为tru
萌新的Canvas笔记（三）
Arya的博客
07-28 324
用了图形变换的方法尝试了一个Demo之后，再来看一个图形变换的方法。transform(a,b,c,d,e,f)这个函数本质利用了一个图形变换矩阵，从左到右的参数依次是，水平缩放，水平倾斜，垂直倾斜，垂直缩放，水平位移，垂直位移。 使用了transform之后，会对之后要绘制的图形产生相应的变换。 setTransform(a,b,c,d,e,f)由于transform是累计的，当使用过多的时候，会
安卓自定义View进阶-Canvas之图片文字
热门推荐
GcsSloop
02-12 1万+
在上一篇文章 Canvas 之画布操作中我们了解了画布的一些基本操作方法，本次了解一些绘制图片文字相关的内容。如果你对前几篇文章讲述的内容熟练掌握的话，那么恭喜你，本篇结束之后，大部分的自定义 View 已经难不倒你了，当然了，这并不是终点，接下来还会有更加炫酷的技能。
2022年Android开发学习路线，714页PDF的鸿蒙学习笔记,
m0_67615803的博客
03-30 597
知识点的准备上： java基础： 主要考察的点在各种关键字，容器类，多线程相关类，gc相关知识，jvm内存模型。 android基础： 主要考察 四大组件, Handler机制，常用类如sharedPreference，intentService, 自定义view，view点击事件传递，binder机制。 计网: 详细点看一下tcp，udp相关的点，其他知识有个概念即可。 数据结构： 常用数据结构要掌握。 算法： 掌握剑指offer就差不多了。 设计模式： 掌握几种常用设计模式即可…至今只被问了单例和修饰者
b站唐老师人工智能基础知识笔记
qq_45064049的博客
08-19 2024
机器学习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
Unity如何将数字图片分解成数字显示出来——第一篇笔记
Assassinbaba的博客
11-10 1823
作为一个小萌新,我也终于开始使用CSDN来记录自己的笔记了，废话不多说，进入正题。 我希望的是能过获取图片0~9，并且将其根据数值进行一定顺序的排列，网上看到的设置自定义字体，本人感觉相对来说比较麻烦，而且我也不需要一直使用这个字体，所以就简单的自己写了个代码（因为自己也是刚学习不久的阶段，不排除网上有雷同）。 首先，需要一张图片，图片背景透明（这个图片随便找的）。 然后放入Unity，将sprite Mode改成 Multiple->Apply->Spite Editor Slice，切成如下
【Unity小技巧】在Unity中实现类似书的功能（附git源码）
最新发布
向宇
08-25 954
欢迎来到游戏的书籍之门，一个充满魔力和想象力的世界。在这里，你将体验到一种全新的游戏界面交互方式——翻书。通过Unity引擎的强大功能，我们成功地将书籍的神奇氛围融入到游戏中，为玩家带来了一种崭新、富有艺术感的页面选择方式。你可以把这个效果用在任何地方，比如关卡选择，商店，故事介绍，物品背包，成就页面等等，这能极大的丰富你的游戏。无疑，游戏UI交互是极为重要的，对比死板的页面，他能给玩家一种新颖感，让你的游戏在一开始就抓住每个玩家的心！
ctf.show-萌新计划(1-7)
1stPeak's Blog
04-02 3381
这是ctf.show的萌新计划，简单记录一下，太菜了，还没全做出来… 第一题 源码： <html> <head> <title>ctf.show萌新计划web1</title> <meta charset="utf-8"> </head> <body> <?php # 包含数据库连接文件 ...
mui. ajax报错，type为abort问题
Arya的博客
11-22 8191
问题描述： 开发调试过程中，在Hbuilder内调用mui.ajax，抛出异常，type为abort。解决：后来得知原因是不能使用localhost和127.0.0.7需要使用本机的IP地址，且手机和电脑要连同一无线，修改ajax的访问地址后，问题解决。
Hibernate复习笔记：五天学习精华
"hibernate达内五天复习笔记.pdf，包含hibernate的五天复习内容，由作者hao861002编写，详细介绍了ORM原理、Hibernate的结构、映射技术、对象状态、HQL查询等内容，旨在帮助学习者掌握Hibernate框架的核心知识。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值