canvas绘图基础(五)

最新推荐文章于 2024-11-20 12:35:08 发布
最新推荐文章于 2024-11-20 12:35:08 发布
阅读量281 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_37972723/article/details/78627067
本文介绍Canvas的基本绘图方法，包括阴影、透明度设置、剪辑区域应用、路径方向原理及扩展API等，还展示了如何实现椭圆绘制和交互功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一.阴影

context.shadowColor=”gray”;//指定阴影的颜色
context.shadowOffsetX=-20;//指定阴影的位移值
context.shadowOffsetY=-20;//指定阴影的位移值
context.shadowBlur=5;//描述阴影模糊的程度（值越大越模糊）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #000; display: block; margin:50px auto">
    您的浏览器不支持canvas画布！
</canvas>
<script type="text/javascript">
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        canvas.width = 1024;
        canvas.height = 800;
        var context = canvas.getContext("2d");

        context.fillStyle = "#058";
        context.shadowColor = "gray";
        context.shadowOffsetX = 15;
        context.shadowOffsetY = 15;
        //负值时阴影方向相反
        context.shadowOffsetX = -15;
        context.shadowOffsetY = -15;
        context.shadowBlur = 15;//值越大越模糊
        context.fillRect(200,200,400,400);
    }
</script>
</body>
</html>

二.global属性

globalAlpha

context.globalAlpha=1;默认值，在这种情况下默认绘制的图形都不具有透明度，即后绘制的图形会盖住之前绘制的图形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #000; display: block; margin: 50px auto">

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

        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);
            context.fillStyle = "rgb("+R+","+G+","+B+")";
            context.beginPath();
            context.arc(Math.random()*canvas.width,Math.random()*canvas.height,
                Math.random()*60, 0,Math.PI*2);
            context.fill();
        }
    }
</script>
</body>
</html>
globalCompositeOperation（描述绘制的图形在重叠时所产生的效果）

context.globalCompositeOperation=”source-over”;//后绘制的图形会盖住之前绘制的图形。
context.globalCompositeOperation=”destination-over”;//之前绘制的图形会盖住之后绘制的图形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" style="border:solid #000; display: block; margin: 50px auto">

</canvas>
<script type="text/javascript">
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        var context = canvas.getContext("2d");
        context.fillStyle = "blue";
        context.fillRect(100,200,400,400);

        context.globalCompositeOperation = "source-over";
        context.globalCompositeOperation = "destination-over";

        context.fillStyle = "red";
        context.beginPath();
        context.moveTo(400,300);
        context.lineTo(650,700);
        context.lineTo(150,700);
        context.closePath();
        context.fill();

    }
</script>
</body>
</html>

三.clip和剪辑区域

context.clip();此函数与路径规划函数一起使用，例如：lineTo、arc、贝塞尔曲线等等
此函数的意图是使用刚才设置的路径，把他剪切为当前的绘制环境，也就是说在之前，我们的绘制环境是整个canvas画布，使用clip()后，我们的绘制环境变为刚设置的路径的封闭部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #000; display: block; margin: 50px auto">

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

        context.beginPath();
        context.fillStyle = "black";
        context.fillRect(0,0,canvas.width,canvas.height);

        context.beginPath();
        context.arc(400,400,150,0,Math.PI*2);
        context.fillStyle = "#fff";
        context.fill();
        context.clip();

        context.font = "bold 80px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle = "#058";
        context.fillText("canvas",canvas.width/2,canvas.height/2);
    }
</script>
</body>
</html>

这里写图片描述

四.路径方向和剪纸效果

非零环绕原则

用于判断射线在多边形的外面还是里面。
这里写图片描述

判断依据：
为零：在外面，不染色。
不为零：在里面，要染色。

一个最简单的例子
这里写图片描述

在环内取一点，很明显为0，所以在外面，不用染色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #000; display: block;margin: 50px auto">
    您的浏览器不支持canvas画布！
</canvas>
<script type="text/javascript">
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        var context =  canvas.getContext("2d");

        //绘制圆形
        context.beginPath();
        context.arc(400,400,300,0,Math.PI*2,false);
        context.arc(400,400,150,0,Math.PI*2,true);
        context.closePath();

        context.fillStyle = "#058";
        context.shadowColor = "gray";
        context.shadowOffsetX = 10;
        context.shadowOffsetY = 10;
        context.shadowBlur = 10;
        context.fill();
    }
</script>
</body>
</html>
剪纸效果

通过非零环绕原则，主要确定那个区域是否染色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #000; display: block; margin: 50px auto">
    您的浏览器不支持canvas画布！
</canvas>
<script type="text/javascript">
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        var context = canvas.getContext("2d");

        //绘制
        context.beginPath();
        context.rect(100,100,600,600);
        pathRect(context,200,200,400,200);
        pathTriangle(context,300,450,150,650,450,650);
        context.arc(550,550,100,0,Math.PI*2,true);
        context.closePath();

        context.fillStyle = "#058";
        context.shadowColor = "gray";
        context.shadowOffsetX = 10;
        context.shadowOffsetY = 10;
        context.shadowBlur = 10;
        context.fill();
    };

    function pathRect(cxt,x,y,width,height) {
        cxt.moveTo(x,y);
        cxt.lineTo(x,y+height);
        cxt.lineTo(x+width,y+height);
        cxt.lineTo(x+width,y);
        cxt.lineTo(x,y);
    }

    function pathTriangle(cxt,x1,y1,x2,y2,x3,y3) {
        cxt.moveTo(x1,y1);
        cxt.lineTo(x2,y2);
        cxt.lineTo(x3,y3);
        cxt.lineTo(x1,y1);
    }
</script>
</body>
</html>

这里写图片描述

五.绘制椭圆

ctx.ellipse(x, y, radiusX, radiusY, rotation,startAngle, endAngle, anticlockwise);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #000; display: block; margin: 50px auto">
    您的浏览器不支持canvas画布！
</canvas>
<script type="text/javascript">
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;

        var context = canvas.getContext("2d");
        //浏览器支持ellipse时绘制椭圆
        //void ctx.ellipse(x, y, radiusX, radiusY, rotation,
         startAngle, endAngle, anticlockwise);
        if(context.ellipse) {
            context.beginPath();
            context.ellipse(400,400,300,200,0,0,Math.PI*2);
            context.stroke();
        }
        else {
            alert("no ellipse");
        }
    }
</script>
</body>
</html>

六.使用canvas交互

isPointInPath(x,y)是 Canvas 2D API 用于判断在当前路径中是否包含检测点的方法。
返回值：一个Boolean值，当检测点包含在当前或指定的路径内，返回 true；否则返回 false。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #000; display: block; margin: 50px auto">
    您的浏览器不支持canvas画布！
</canvas>
<script type="text/javascript">
    var balls = [];
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    window.onload = function () {
        canvas.width = 800;
        canvas.height = 800;
        for(var i=0; i<10; i++) {
            var aBall  = {
                x : Math.random()*canvas.width,
                y : Math.random()*canvas.height,
                r : Math.random()*50+20
            };
            balls[i] = aBall;
        }
        draw();
        canvas.addEventListener("mouseup",detect);
        //用canvas的addEventListener方法创建事件
    };
    function draw() {
        //一次for循环遍历balls数组
        for(var i=0; i<balls.length; i++) {
            context.beginPath();
            context.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2);
            context.fillStyle = "#058";
            context.fill()
        }
    }

    function detect() {
        //isPointInPath 是canvas中内置的点击检测函数
        //context.isPointInPath(x,y)看传入的点(x,y)是否在当前规划的路径内。
        //下边的例子是绘制10个小球，当点击小球时它的颜色由蓝色变为红色，示例代码如下：
        //获得鼠标点击在canvas中位置的方法
        var x = event.clientX - canvas.getBoundingClientRect().left;
        //鼠标坐标基于Web文档的横向距离减去canvas画布离整个文档左侧的距离
        var y = event.clientY - canvas.getBoundingClientRect().top;

        for(var i=0; i<balls.length; i++) {
            context.beginPath();
            context.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2);
            if(context.isPointInPath(x,y)) {
                context.fillStyle = "red";
                context.fill();
            }
        }
    }
</script>
</body>
</html>

七.扩展canvas中的context

设计自己的API，在context中加入新的方法，方法名为 fillStar。
调用对象的原型，对这个原型进行修改（函数当做对象来处理）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #000; display: block; margin: 50px auto">
    您的浏览器不支持canvas画布！
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    CanvasRenderingContext2D.prototype.fillStar = function (r,R,x,y,rot) {
        this.beginPath();
        for(var i=0; i<5; i++) {
            this.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
                -Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
            this.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
                -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
        }
        this.closePath();
        this.fill();
    };
    window.onload = function () {
        canvas.width = 800;
        canvas.height = 800;
        context.fillStyle = "#058";
        context.fillStar(150,300,400,400,0);
    }
</script>
</body>
</html>

本教程主要是根据慕课网刘宇波老师的canvas绘图详解视频教程总结而来。在此特别感谢刘老师的无私奉献。

课程链接

https://www.imooc.com/learn/185

canvas基础应用
m0_45093055的博客
03-21 792
Canvas 的使用场景非常广泛，主要用于实现各种图形、动画、游戏、图像处理和交互效果，接下来主要从水印效果、柱状图、个人签名、球在屏幕上弹跳的效果四种场景来总结。// 使用 toDataURL 方法将 canvas 内容转换为图片数据的 URL。// 获取 img 元素并设置其 src 属性为图片数据的 URL。// 获取 canvas 元素和绘图上下文。// 监听鼠标离开canvas事件。// 该方法只允许调用一次。// 监听鼠标按下事件。// 监听鼠标移动事件。// 监听鼠标松开事件。
Canvas 绘图教程：从基础到高级
m0_62364592的博客
02-12 1122
本教程系统讲解 HTML5 Canvas 绘图技术，从基础概念到高级应用。主要内容包括：基本绘图操作（线条、图形、文字）、颜色与样式（填充、描边、渐变）、图形变换（平移、旋转、缩放）、动画绘制基础、高级动画效果（粒子系统、波浪效果）、性能优化技巧等。通过实践示例，读者将掌握 Canvas 的核心概念和常用技术，能够独立开发图形动画、游戏界面、数据可视化等项目。本教程适合具备基础 JavaScript 知识的开发者，通过循序渐进的学习，快速掌握 Canvas 绘图技术
canvas使用注意点
MOONCOM的博客
05-08 851
1、canvas.arc();方法画圆时，最后一个参数默认为false，false为顺时针，当为true时，为顺时针如果想画一个1/4圆，需要结合lineTo()方法canvas.beginPath(); canvas.arc(100,100,50,0,Math/2); canvas.lineTo(100,100); canvas.closePath();2、canvas.createPatter...
HTML5中canvas绘图基础详解
输入知识，消化知识，输出知识，分享知识，教人让我学习更好，业精于勤荒于嬉，行成于思毁于随
09-08 2484
H5中新增了重要元素canvas,通过绘制任意图形，借助自带API，通过编写js可以控制各种图形，制作动画效果，对web具有划时代意义。
Canvas绘图基础
热门推荐
幺妹儿儿的博客
03-17 1万+
目录 一、什么是Canvas？ 二、Canvas元素的定义（写在html文件的body中） 三、使用JavaScript获取网页中的Canvas对象 四、Canvas绘图 （1）绘制直线 （2）绘制矩形 （3）绘制圆弧 （4）填充和描边 一、什么是Canvas？ canvas就是画布，可以画线，图形，填充，图像绘制等操作。 canvas不仅提供简单的二维矢量绘图，也提供三维绘图。 二、Canvas元素的定义（写在html文件的body中） <canvas id=“myCa
Canvas 绘图基础教程
wscfan的博客
11-20 678
Canvas 是 HTML5 提供的一个用于图形绘制的元素，它提供了一个即时渲染的位图表面。与 SVG 不同，Canvas 是基于像素的，适合处理密集型图形操作和动画。
Android canvas绘图基础之运动的时钟
哆啦A梦的博客
04-04 4348
一、canvas绘制图形canvas可以绘制很多几何图形、文本等很多东西： 1. drawText 2. drawPoint 3. drawLine 4. drawRect 5. drawCircle 6. drawOval 7. drawArc 8. drawPath 9. drawBitmap 关于绘图基础讲解这篇博客讲的非常细致，推荐大家可以去看一下， Android中C
canvas基础绘图
觅_的博客
08-11 788
canvas 可以做什么？ 使用canvas 可以绘制复杂图形、做动画、处理图像、开发游戏、处理视频… canvas 是什么？ h5新增canvas 2d 绘图功能 在html中： canvas是html标签 canvas 可以理解为一张画布 我们需要用js在canvas里绘制图形 注意事项： 设置canvas dom 元素的 width、height 属性 不要使用css 设置canvas 尺寸 兼容ie9及其以上 canvas 尺寸不能过大（尽量控制在4000以内） canvas具体极限值因
canvas的基础使用
qq_37822457的博客
06-04 2422
x,y为圆心坐标，r为半径，startAngle起始角度，endAngle终点角度，anticlosewise为旋转方向（true逆时针，false顺时针，默认顺时针）：保存canvas的状态。save之后可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。：恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。图形是线条构成的，线条是由路径绘制而成。如：三角形就是由三条路径绘制而成。canvas绘图时以画布左上角坐标为原点（0，0）绘图。：顺时针旋转坐标轴。
Android中Canvas绘图基础详解
11-11
该代码是一个完整的Android工程，详细演示如了如何使用Android中的各种drawXXX方法，以及画笔Paint如何影响绘制的效果。 具体参见博文： http://blog.csdn.net/iispring/article/details/49770651
SVG和Canvas绘图：SVG和Canvas绘图基础介绍.docx
08-28
SVG和Canvas绘图：SVG和Canvas绘图基础介绍.docx
JavaScript基础——使用Canvas绘图
10-21
这些知识点构成了使用Canvas绘图的基础，为进行更复杂的绘图操作提供了必要的准备。随着技术的发展，Canvas在Web绘图方面扮演着越来越重要的角色，为开发者提供了一个灵活且功能强大的绘图工具。
一波HTML5 Canvas基础绘图实例代码集合
09-28
在本篇文章中，我们将探讨Canvas的基础绘图实例，包括圆形、矩形、圆角等基本图形的绘制方法。 首先，我们需要获取Canvas元素并创建2D渲染上下文。这是通过以下代码实现的： ```javascript var canvas = document....
绚丽的计时效果Canvas绘图与动画基础
05-28
这个“绚丽的计时效果Canvas绘图与动画基础”项目，旨在帮助学习者掌握基于Canvas的计时动画基础知识，通过实践加深对Canvas的理解。 在HTML5中，`<canvas>`元素是一个可绘制图形的画布，通过JavaScript来控制其...
信捷XC系列PLC主从通讯程序设计与实现——工业自动化控制核心技术
08-09
信捷XC系列PLC主从通讯程序的设计与实现方法。信捷XC系列PLC是一款高性能、高可靠性的可编程逻辑控制器，在工业自动化领域广泛应用。文中阐述了主从通讯的基本概念及其重要性，具体讲解了配置网络参数、编写程序、数据交换以及调试与测试四个主要步骤。此外，还探讨了该技术在生产线控制、仓储物流、智能交通等多个领域的应用实例，强调了其对系统效率和稳定性的提升作用。 适合人群：从事工业自动化控制的技术人员、工程师及相关专业学生。 使用场景及目标：适用于需要多台PLC协同工作的复杂工业控制系统，旨在提高系统的效率和稳定性，确保各设备间的数据交换顺畅无误。 其他说明：随着工业自动化的快速发展，掌握此类通信协议和技术对于优化生产流程至关重要。
Qt 5.12.4与Halcon构建视觉流程框架：编译与测试的成功实践
08-09
如何将Halcon视觉技术和Qt框架相结合，构建一个强大的视觉处理流程框架。文中首先阐述了选择Qt 5.12.4的原因及其优势，接着描述了框架的具体构建方法，包括利用Qt的跨平台特性和界面设计工具创建用户界面，以及用Halcon进行图像处理与识别。随后，文章讲解了编译过程中需要注意的关键步骤，如正确引入Halcon的头文件和库文件，并提供了一个简单的代码示例。最后，作者分享了测试阶段的经验，强调了确保系统在各种情况下都能正常工作的必要性。通过这次实践，证明了两者结合可以带来更高效、更稳定的视觉处理解决方案。 适合人群：具有一定编程经验的技术人员，尤其是对计算机视觉和图形界面开发感兴趣的开发者。 使用场景及目标：适用于希望深入了解Qt与Halcon集成应用的开发者，旨在帮助他们掌握从框架搭建到实际部署的全过程，从而提升自身技能水平。 阅读建议：读者可以在阅读过程中跟随作者的步伐逐步尝试相关操作，以便更好地理解和吸收所介绍的知识点和技术细节。
【CAD入门基础课程】1.4 AutoCAD2016 功能介绍.avi
最新发布
08-09
一、AutoCAD 2016的新增功能 版本演进: 从V1.0到2016版已更新数十次，具备绘图、编辑、图案填充、尺寸标注、三维造型等完整功能体系 界面优化: 新增暗黑色调界面：使界面协调深沉利于工作 底部状态栏整体优化：操作更实用便捷 硬件加速：效果显著提升运行效率 核心新增功能: 新标签页和功能区库：改进工作空间管理 命令预览功能：增强操作可视化 地理位置和实景计算：拓展设计应用场景 Exchange应用程序和计划提要：提升协同效率 1. 几何中心捕捉功能 新增选项: 在对象捕捉模式组中新增"几何中心"选项 可捕捉任意多边形的几何中心点 启用方法: 通过草图设置对话框→对象捕捉选项卡 勾选"几何中心(G)"复选框(F3快捷键启用) 2. 标注功能增强 DIM命令改进: 智能标注创建：基于选择的对象类型自动适配标注方式 选项显示优化：同时在命令行和快捷菜单中显示标注选项 应用场景: 支持直线、圆弧、圆等多种图形元素的智能标注 3. 打印输出改进 PDF输出增强: 新增专用PDF选项按钮 支持为位图对象添加超链接 可连接到外部网站和本地文件 操作路径: 快速访问工具栏→打印按钮→PDF选项对话框 4. 其他重要更新 修订云线增强: 支持创建矩形和多边形云线 新增虚拟线段编辑选项 系统变量: 新增多个控制新功能的系统变量
电力电子领域单相PWM整流模型的主电路与控制模块实现研究
08-09
内容概要：本文详细探讨了单相PWM整流模型的设计与实现，重点介绍了主电路和控制模块的具体实现方法。主电路作为整流模型的核心部分，涉及功率因数、电流稳定性和调节范围等因素，常采用全桥或多级整流等拓扑结构。控制模块则由PWM控制器、传感器和执行器组成，负责调节交流电源的输入，实现所需电压和电流波形。文中还强调了算法设计、硬件接口设计和参数调整与优化的重要性，指出这些因素对于提高整流效果和效率至关重要。 适合人群：从事电力电子领域的研究人员、工程师及相关专业的学生。 使用场景及目标：适用于希望深入了解单相PWM整流模型工作原理和技术细节的人群，旨在帮助他们掌握主电路和控制模块的设计要点，提升电力系统的稳定性和效率。 其他说明：文中提到的相关技术可以通过进一步查阅专业文献和技术资料获得更深入的理解。
这是sanllin的第一次尝试开发app，调用kimi的文本识别和图像识别
08-09
资源下载链接为： https://pan.quark.cn/s/39ff61edf06f 这是sanllin的第一次尝试开发app，调用kimi的文本识别和图像识别（最新、最全版本！打开链接下载即可用！）
安卓Canvas绘图基础与实例演示
此外，该项目可能会包含交互式的示例，允许开发者通过点击或触摸屏幕来改变画布上的绘制内容，从而直观感受Canvas绘图的强大功能和灵活性。 在学习和应用Android绘图技术时，查看在线教程、技术文章和实际的示例...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值