CanvasDay06 Canvas高级内容（阴影,globalAlpha,globalCompositeOperation,clip,非零环绕原则,isPointeInPath）

最新推荐文章于 2023-07-23 18:44:37 发布
最新推荐文章于 2023-07-23 18:44:37 发布
阅读量257 收藏
点赞数
分类专栏： # Canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43415644/article/details/106899499
版权

目录

0x00 阴影

0x01 globalAlpha

0x02 globalCompositeOperation

0x03 clip

0x04 非零环绕原则

0x05 使用Canvas 交互 和 isPointInPath

0x00 阴影

ctx.shadowColor 阴影颜色

ctx.shadowOffsetX 阴影的位移值

ctx.shadowOffsetY

ctx.shadowBlur 阴影的模糊距离

效果：

代码：

    var canvas = document.getElementById('canvas');
    canvas.width=document.body.clientWidth;
    canvas.height=document.body.clientHeight;

    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#058';
    ctx.shadowColor = "gray";
    ctx.shadowOffsetX = 20;
    ctx.shadowOffsetY = 20;
    ctx.shadowBlur = 5;

    ctx.fillRect(200,200,400,400);

0x01 globalAlpha

设置全局透明度

globalAlpha = 1(default)

案例：

效果：

代码：

    var canvas = document.getElementById('canvas');
    canvas.width=document.body.clientWidth;
    canvas.height=document.body.clientHeight;

    var ctx = canvas.getContext('2d');
    ctx.globalAlpha = 0.7;
    for(var i=0;i<100;i++){
        var R = Math.floor(Math.random()*255);
        var G = Math.floor(Math.random()*255);
        var B = Math.floor(Math.random()*255);

        ctx.fillStyle = "rgba("+R+","+G+","+B+")";

        ctx.beginPath();
        ctx.arc(Math.random()*canvas.width,Math.random()*canvas.height,Math.random()*100,0,2*Math.PI);
        ctx.fill();
        ctx.closePath();
    }

0x02 globalCompositeOperation

globalCompositeOperation = "source-over" （default）

设置图像发生重叠时的效果

source-over 表示后绘制的图形 覆盖之前绘制的图形

destination-over 表示之前绘制的图形 覆盖 之后绘制的图形

案例：

效果：

代码：


window.onload = function(){
    draw('source-over');
    var a = document.getElementsByTagName('a');
    for(var i =0;i<a.length;i++){
        a[i].onclick = function(){
            draw(this.text);
        }
    } 
}
function draw(text){
    var canvas = document.getElementById('canvas');
    canvas.width=1200;
    canvas.height=650;
    var ctx = canvas.getContext('2d');
   
    ctx.clearRect(0,0,canvas.width,canvas.height);
    
    ctx.font = '40px solid Arial';
    ctx.textAlign ='center';
    ctx.textBaseline = "middle";
    ctx.fillStyle = '#058';
   
   

    ctx.fillText(text,canvas.width/2,canvas.height/2);
    ctx.fillStyle='#058';
    ctx.fillRect(100,100,200,200);

    ctx.globalCompositeOperation=text.trim();
    ctx.fillStyle ='green';
    ctx.beginPath();
    ctx.moveTo(200,200);
    ctx.lineTo(100,300);
    ctx.lineTo(400,300);
    ctx.closePath();
    ctx.fill();

}

0x03 clip

ctx.clip() 将之前规划的路径所构成的封闭图形 作为 绘制环境 （默认情况下绘制环境是整个画布）

效果：

代码：

    window.onload = function(){
        var canvas = document.getElementById('canvas');
    
        canvas.width = 1024;
        canvas.height = 689;
        
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = 'black';
        ctx.fillRect(0,0,canvas.width,canvas.height);
        
        ctx.beginPath();
        ctx.arc(canvas.width/2,canvas.height/2,100,0,Math.PI*2);
        ctx.fillStyle = '#fff';
        ctx.fill();
        ctx.clip();

        ctx.font='100px blod Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillStyle = '#058';
        ctx.fillText("DataBank",canvas.width/2,canvas.height/2);
    }

探照灯效果：

代码：

    var canvas = document.getElementById('canvas');
    
    canvas.width = 1024;
    canvas.height = 689;
    var searchLight={
         x:canvas.width/2,
         y:canvas.height/2,
         r:100,
         vx:Math.random()*10+10,
         vy:Math.random()*10+10
    }

    var ctx = canvas.getContext('2d');

    setInterval(function(){
        render(ctx);
        update(ctx);
    },50);




function render(ctx){
        ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
        
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = 'black';
        ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
        
        ctx.beginPath();
        ctx.arc(searchLight.x,searchLight.y,100,0,Math.PI*2);
        ctx.fillStyle = '#fff';
        ctx.fill();
        ctx.clip();

        ctx.font='100px blod Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillStyle = '#058';
        ctx.fillText("DataBank",ctx.canvas.width/2,ctx.canvas.height/2-100);
        ctx.fillText("DataBank",ctx.canvas.width/2,ctx.canvas.height/2);
        ctx.fillText("DataBank",ctx.canvas.width/2,ctx.canvas.height/2+100);
        ctx.fillText("DataBank",ctx.canvas.width/2,ctx.canvas.height/2+200);
        ctx.restore();
}
function update(ctx){
    searchLight.x += searchLight.vx;
    searchLight.y += searchLight.vy;
    console.log(searchLight);

            // 下边缘碰撞检测
        if(searchLight.y >= ctx.canvas.height - searchLight.r){
            searchLight.y  = ctx.canvas.height - searchLight.r;
            searchLight.vy = -searchLight.vy*0.5;//每次反弹都会损失能量
        }
        if(searchLight.y <= 0 +searchLight.r){
            searchLight.y = 0+searchLight.r;
            searchLight.vy = -searchLight.vy;
        }
        if(searchLight.x <= 0+searchLight.r){
            searchLight.x = 0+searchLight.r;
            searchLight.vx = -searchLight.vx;
        }
        if(searchLight.x >= ctx.canvas.width-searchLight.r){
            searchLight.x = ctx.canvas.width-searchLight.r;
            searchLight.vx = - searchLight.vx;
        }
}

0x04 非零环绕原则

如何判断一块区域在多边形的内侧还是外侧呢？

可以将顺时针箭头规定为1，逆时针箭头规定为-1。

如果从该区域向外引出一条射线，存在穿过的箭头总和为0的情况，则该区域在外侧

否则，该区域在内侧

典型应用：剪纸效果

也就是如果我们绘制两个圆弧，一个圆弧顺时针，一个圆弧逆时针，两个圆弧构成一个封闭图形，那么canvas便会根据非零环绕原则判定封闭图形的内侧和外侧。

效果：

代码：

    var canvas = document.getElementById('canvas');
    
    canvas.width = 1024;
    canvas.height = 689;

    var ctx = canvas.getContext('2d');

    
    ctx.arc(canvas.width/2,canvas.height/2,100,0,Math.PI *2,true);
    ctx.arc(canvas.width/2,canvas.height/2,50,0,Math.PI *2,false);
    ctx.shadowColor = 'grey';
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur =10;
    ctx.fillStyle = '#058';
    ctx.fill();

0x05 使用Canvas 交互 和 isPointInPath

ctx.clearRect(x,y,width,height);

清空一个矩形区域

ctx.isPointInPath(x,y)

点击检测函数

(x,y) 组成了一个点的坐标，该函数判断该点是否在当前所规划的路径内

案例：

点击小球换色


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #canvas{
            border:1px solid black;
            position:absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <canvas id='canvas'></canvas>
</body>
<script>

    var canvas = document.getElementById('canvas');
    
    canvas.width = 1024;
    canvas.height = 689;

    var ctx = canvas.getContext('2d');
    var balls = [];
    window.onload = function(){
        for(var i =0;i<10;i++){
            var ball ={
                x:Math.random() * canvas.width,
                y:Math.random() * canvas.height,
                r:Math.random() * 100,
                color:'#058'
            };

            balls[i] = ball;
            ctx.beginPath();
            ctx.arc(ball.x,ball.y,ball.r,0,2* Math.PI);
            ctx.fillStyle = ball.color;
            ctx.fill();
        }
        canvas.addEventListener('mouseup',detect);
        
    }


function detect(event){
    // 标准的获得鼠标在canvas中的位置的方法，记住
    //getBoundingClientRect是一个js函数，并不会canvas提供的接口，该函数用于获取一个dom对象的盒子模型（包围框）的相关属性
    var x = event.clientX - canvas.getBoundingClientRect().left;
    var y = event.clientY - canvas.getBoundingClientRect().top;

    for(var i=0;i<balls.length;i++){
        ctx.beginPath();
        //注意要先规划路径，然后才能判断鼠标当前是否在路径内
        ctx.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI * 2);
        if(ctx.isPointInPath(x,y)){
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            var color = "rgb("+r+","+g+","+b+")";
            ctx.fillStyle = color;
            ctx.fill();
        }
    }


}





</script>
</html>

点击小球运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    html,body{
        height:100%;
    }
    </style>
</head>
<body>
    <canvas id='canvas'></canvas>
</body>
<script>
    var canvas = document.getElementById('canvas');
    canvas.width=document.body.clientWidth;
    canvas.height=document.body.clientHeight;
    var ctx = canvas.getContext('2d');

window.onload = function(){
   
    canvas.addEventListener('click',detect);


    ctx.globalAlpha = 1;
    ctx.globalCompositeOperation='xor';
    balls = [];

    for(var i=0;i<100;i++){
        var R = Math.floor(Math.random()*255);
        var G = Math.floor(Math.random()*255);
        var B = Math.floor(Math.random()*255);

        var color = "rgba("+R+","+G+","+B+")";
        var ball = {
            x:Math.random()*canvas.width,
            y:Math.random()*canvas.height,
            r:Math.random()*100,
            vx:Math.random()*20,
            vy:Math.random()*20,
            c:color,
            flag:0
        }
       balls.push(ball);
    }
    setInterval(function(){
        render(ctx);
        update(ctx);
    },50)
}
function detect(event){
    var x = event.clientX - canvas.getBoundingClientRect().left;
    var y = event.clientY - canvas.getBoundingClientRect().top;
    for(var i=0;i<balls.length;i++){
        ctx.beginPath();
        ctx.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI * 2);
        if(ctx.isPointInPath(x,y)){
           balls[i].flag = (balls[i].flag ==1)?0:1;
        }
    }
}
function render(ctx){
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
    // console.log(ctx.canvas.height);

    for(var i=0;i<balls.length;i++){
        ctx.beginPath();
        ctx.fillStyle = balls[i].c;
        ctx.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI * 2);
        ctx.closePath();
        ctx.fill();
    }
}

function update(ctx){
    for(var i =0;i<balls.length;i++){
        if(balls[i].flag == 1 ){
            balls[i].x += balls[i].vx;
            balls[i].y += balls[i].vy;
                // 碰撞检测
            // 下边缘碰撞检测
            if(balls[i].y >= ctx.canvas.height - balls[i].r){
                balls[i].y  = ctx.canvas.height - balls[i].r;
                balls[i].vy = -balls[i].vy*0.5;//每次反弹都会损失能量
            }
            if(balls[i].y <= 0 +balls[i].r){
                balls[i].y = 0+balls[i].r;
                balls[i].vy = -balls[i].vy;
            }
            if(balls[i].x <= 0+balls[i].r){
                balls[i].x = 0+balls[i].r;
                balls[i].vx = -balls[i].vx;
            }
            if(balls[i].x >= ctx.canvas.width-balls[i].r){
                balls[i].x = ctx.canvas.width-balls[i].r;
                balls[i].vx = - balls[i].vx;
            }
        }

    }
}

</script>


</html>

 

'"<>{{7*7}}
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
01-19
路径方向与非零环绕原则平时我们画的图形都是规规矩矩的，那么如果我们用线条画了个抽象派作品，就像下面这图一样，童鞋们知道怎么用fill()染色呢？ 这里就要用到数学上的一个方法——非零环绕原则，来判断哪块区域...
Canvas之globalAlpha和globalCompositeOperation
Ping果狸的博客
01-22 982
Canvas之globalAlpha和globalCompositeOperation globalAlpha globalAlpha是使全局具有透明度 globalAlpha = 1 (default) globalCompositeOperation globalCompositeOperation是渲染绘制的图像在重叠时的效果 globalCompositeOperation =
canvas合成图形、绘制图像、绘制文字与阴影
小柒的前端之旅
04-16 1024
●合成图形 利用globalCompositeOperation属性来决定图形合成时的效果； 利用globalAlpha属性来设置透明度； context.globalCompositeOperation = type; context.globalAlpha = 0.5; type值：(一部分) source-over: 新图形覆盖原有图形 destination-over：在原有图形下绘制新图...
前端必知：24.设置圆角和设置阴影效果
最新发布
qq_52799985的博客
07-23 2565
设置圆角和设置阴影效果是前端开发中常用的技巧，用于改善界面的外观和提升用户体验。通过灵活运用这些样式技巧，我们可以创造出各种独特和吸引人的界面效果。然而，在使用这些样式技巧时，也需要注意不要过度使用，以免影响用户界面的可读性和可用性。
html 画圆的阴影,HTML5 canvas
weixin_35870469的博客
06-17 658
canvas元素：是HTML5新增的专门用来绘制图形的元素。canvas元素是一块无色透明的区域，它只是一个容器，本身不具备绘制的功能，开发者通过javascript脚本在区域上实现任意绘图。并不是所有浏览器都支持canvas元素。camvas只有两个可选的属性width、height，如果不设置，则默认width为300，height为150，单位都是px。也可以使用css属性来设置宽高，但是如...
贴一个电脑自动出题，然后判断正误，显示分数的python帖子，基于tkinter的gui图形界面
weixin_44077170的博客
06-01 1077
之前实验室考核这个题目，网上没有代码 完全没思路，考核的日子越来越近，但是啥都没做好，根本不会写这玩意，去贴吧求助，都是代写收费的，希望他们提供一点思路，他们只认钱。当时很悲催，楼主看了不少教学视频，然后自己一步一步慢慢摸索，终于在最后一天写出来了，也就是今天写出来的，现在发布一下，有需要的拿去. import tkinter import copy import tkinter.message...
2.32 globalAlpha和globalCompositeOperation｜Canvas高级内容｜Canvas图形、动画、游戏开发从入门到精通全系列课程
08-31
2.32_globalAlpha和globalCompositeOperation｜Canvas高级内容｜Canvas图形、动画
Canvas globalCompositeOperation
12-08
在默认情况之下，如果在Canvas之中将某个物体（源）绘制在另一个物体（目标）之上，那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。 简单点讲，在Canvas中，把图像源和目标图像，通过Canvas中的 ...
HTML5 canvas基本绘图之绘制阴影效果
09-28
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制阴影方法，感兴趣的小伙伴们可以参考一下
使用Canvas绘图（5）--阴影
跟着信仰走
08-15 1214
2D上下文会根据以下几个属性的值，自动为形状或路径绘制出阴影。 shadowColor:用CSS颜色格式表示的阴影颜色，默认为黑色。 shadowOffsetX:形状或路径x轴方向的阴影偏移量，默认为0. shadowOffsetY:形状或路径y轴方向的阴影偏移量，默认为0. shadowBlur:模糊的像素数，默认为0，即不模糊。 这些属性都可以通过context对象来修改。只要在绘制...
监听Canvas内部元素点击事件的三种方法
10-10 1755
canvas内部元素不能像DOM元素一样方便的添加交互事件监听，因为canvas内不存在“元素”这个概念，他们仅仅是canvas绘制出来的图形。这对于交互开发来说是一个必经障碍，想要监听图形的点击事件思路很简单，只要监听canvas元素本身的点击事件，再判断点击坐标位于哪一个图形内部，就变相实现了图形点击事件。本文将介绍三种方法，判断坐标点是否位于某个canvas图形内部。 约定 本文介绍的三种方...
高德地图CanvasLayer：使用canvas实现层叠圆角多边形热点区域效果
smm的博客
03-10 4245
高德地图使用canvas实现层叠圆角多边形热点区域效果
自定义控件学习之canvas和paint相关知识点学习
A08110123的博客
11-26 156
1，继承自view,实现ondraw方法: 　　　　初始化画笔，TextPaint paint,并设置画笔属性: 　　　　　　paint.setFlags(Paint.ANTI_ALIAS_FLAG)：画笔抗锯齿。 　　　　　　paint.setStyle(Paint.Style.STROKE)：设置画笔样式，默认全部填充Full 　　　　　　　　{　　1.Paint.St...
如何用 JavaScript+Canvas 开发一款超级烧脑小游戏？
CSDN资讯
09-05 2611
作者 |huangjianke 责编 | 伍杏玲 出品 | CSDN（ID：CSDNnews） 【CSDN 编者按】据微信最新数据，微信小游戏累计注册用户量已突破10亿。那么初学者如何开发一款好玩又烧脑的微信小游戏呢？本文作者将详细为大家讲解。 “启逻辑之高妙，因想象而自由。”层叠拼图Plus是一款需要空间想象力和逻辑推理能力完美结合的微信小游戏，偶消奇不消，在简单的游戏规...
canvas
阳神
02-15 145
Canvas canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 <canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。 体验Canva...
图纸根据坐标画区域。canvas类似画板区域选择可回显，不可重叠、交叉、覆盖（限制最大边数）
老杨的博客
03-12 559
先贴图 1.先来两个canvas，一个存，一个画展示 <div class="box" style="width: 100%;height: 800px " v-if="showThis"> <!--划线canvas--> <canvas id="canvas" width="1000px" height="600px" ref="canvas"></canvas> <!--储存--> <canvas id="can
Android图形处理-Canvas
SiMaXiaoChen的博客
11-08 570
绘制图形绘制图形 Canvas 两个坐标系 常见方法 drawARGB drawText drawPoint drawRect drawCircle drawOval drawText具体使用 绘制正常文字 绘制带有对齐方向的文字 绘制带有下划线和加粗的字体 drawArc具体使用 画出一个椭圆 画出任意角度的椭圆 画出一个椭圆的外部弧 只是画出轮廓线 drawPath具体使用 使用path画出图形
canvas js 绘图插件_如何用 JavaScript+Canvas 开发一款超级烧脑小游戏？
weixin_39647412的博客
11-23 239
作者 | huangjianke责编 | 伍杏玲出品 | CSDN(ID：CSDNnews)【CSDN 编者按】据微信最新数据，微信小游戏累计注册用户量已突破10亿。那么初学者如何开发一款好玩又烧脑的微信小游戏呢？本文作者将详细为大家讲解。“启逻辑之高妙，因想象而自由。”层叠拼图Plus是一款需要空间想象力和逻辑推理能力完美结合的微信小游戏，偶消奇不消，在简单的游戏规则下却有着无数种可能性，需要你...
canvas——鼠标移动附近的小球连线
weixin_48683052的博客
03-02 299
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://code.jquery.com/jquery-1.12.4.js"></script> <style type="text/css"> body { background-color: #f.
canvas globalCompositeOperation
06-13
`globalCompositeOperation` 是 Canvas 2D API 中的一个属性，用于设置在绘制新形状时，新形状与画布上已有内容的混合模式。 该属性可以取以下几个值： - `source-over`：默认值，新形状绘制在旧形状上方。 - `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值