《canvas》之第12章 其他应用

已于 2023-12-13 16:30:00 修改
阅读量143 收藏
点赞数
分类专栏： canvas 学习 整理 文章标签： canvas 前端
于 2022-06-27 10:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125362933
版权
整理 同时被 3 个专栏收录
181 篇文章 11 订阅
订阅专栏
学习
130 篇文章 4 订阅
订阅专栏
canvas
20 篇文章 4 订阅
订阅专栏

《canvas》之第12章 其他应用

第12章 其他应用

12.1 canvas对象

document.getElementById()获取canvas对象。

12.1.1 canvas对象属性

width、height。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        body {
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //绘制初始图形
            cxt.fillStyle = "#FF6699";
            cxt.fillRect(30, 30, 50, 50);

            $$("btn").onclick = function () {
                cxt.clearRect(0, 0, cnv.width, cnv.height);
                cxt.translate(10, 10);
                cxt.fillStyle = "#FF6699";
                cxt.fillRect(30, 30, 50, 50);
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas><br />
    <input id="btn" type="button" value="移动" />
</body>
</html>

canvas对象方法

getContext(“2d”)，获取canvas 2d上下文环境对象。
toDataURL()，获取canvas对象产生的位图的字符串。

cnv.toDataURL(type);

type，可选参数，输出的MIME类型（type省略时，默认image/png）。
MIME类型，设定用一种应用程序来打开某种扩展名的文件的方式类型。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //定义文字
            var text = "绿叶学习网";
            cxt.font = "bold 60px 微软雅黑";

            //定义阴影
            cxt.shadowOffsetX = 5;
            cxt.shadowOffsetY = 5;
            cxt.shadowColor = "#66CCFF";
            cxt.shadowBlur = 10;

            //填充文字
            cxt.fillStyle = "#FF6699";
            cxt.fillText(text, 10, 90);

            $$("btn").onclick = function () {
            	//当前页面打开url链接
                window.location.href = cnv.toDataURL("image/png"); 
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="320" height="150" style="border:1px dashed gray"></canvas><br />
    <input id="btn" type="button" value="保存图片" />
</body>
</html>

点击按钮，浏览器地址产生字符串：data:image/png;base64,iV.....==
toDataURL()方法将画布保存为Base64位编码的URL，可直接嵌入网页的小型数据，如img元素的图片文件等。
data URL用处：

  • 发送图片数据到web服务器的数据库，进行长期保存。
  • 浏览器中直接打开，进行本地保存。

12.2 globalAlpha属性

定义canvas环境的透明度。

cxt.globalAlpha = "数值";

取值范围0.0(完全透明)~1.0(完全不透明，默认值)。
针对整个canvas，想实现局部图形或文字的透明效果，可使用RGBA。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            cxt.globalAlpha = "0.3";
            
            cxt.font = "20px bold 微软雅黑";
            
            cxt.fillStyle = "purple";
            cxt.fillText("绿叶学习网", 50, 40);

            cxt.fillStyle = "HotPink";
            cxt.fillRect(50, 50, 100, 50);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

12.3 globalCompositeOperation属性

设置交叉图形的显示方式。

cxt.globalCompositeOperation = "属性值";
属性值说明
source-over新图形覆盖旧图形重叠部分，默认值
source-in只显示新图形重叠部分，其它部分透明处理
source-out只显示新图形未重叠部分，其它部分透明处理
source-atop只显示旧图形+新图形重叠部分，其它部分透明处理
destination-over旧图形覆盖新图形重叠部分
destination-in只显示旧图形重叠部分，其它部分透明处理
destination-out只显示旧图形未重叠部分，其它部分透明处理
destination-atop只显示新图形+旧图形重叠部分，其它部分透明处理
copy只显示新图形，旧图形透明处理
xor两种图形都显示，重叠部分透明处理
darker两种图形都显示，重叠部分相减
lighter两种图形都显示，重叠部分相加
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //绘制矩形
            cxt.fillStyle = "HotPink";
            cxt.fillRect(30, 30, 60, 60);
            
            //绘制圆形
            cxt.beginPath();
            cxt.arc(100, 100, 40, 0, Math.PI * 2, true);
            cxt.closePath();
            
            cxt.globalCompositeOperation = "xor";
            cxt.fillStyle = "LightSkyBlue";
            cxt.fill();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            cxt.globalCompositeOperation = "xor";
			
            //绘制第1个矩形
            cxt.fillStyle = "HotPink";
            cxt.fillRect(30, 30, 60, 60);
			
			cxt.save();
            cxt.globalCompositeOperation = "xor";
            //绘制圆形
            cxt.beginPath();
            cxt.arc(100, 100, 40, 0, Math.PI * 2, true);
            cxt.closePath();
            cxt.fillStyle = "LightSkyBlue";
            cxt.fill();
			cxt.restore();
			
            //绘制第2个矩形
            cxt.fillStyle = "HotPink";
            cxt.fillRect(110, 30, 60, 60);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

12.4 strokeStyle和fillStyle

分别用于描边型stroke()和填充型fill()。

  • 矩形
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            cxt.strokeStyle = "HotPink";
            cxt.strokeRect(20, 20, 50, 50);

            cxt.fillStyle = "LightSkyBlue";
            cxt.fillRect(100, 20, 50, 50);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
  • 圆形
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            cxt.beginPath();
            cxt.arc(50, 50, 25, 0, 360 * Math.PI / 180, false);
            cxt.closePath();
            cxt.strokeStyle = "HotPink";
            cxt.stroke();

            cxt.beginPath();
            cxt.arc(150, 50, 25, 0, 360 * Math.PI / 180, false);
            cxt.closePath();
            cxt.fillStyle = "LightSkyBlue";
            cxt.fill();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
  • 文字
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            var text = "绿叶学习网";
			
            cxt.font = "bold 25px 微软雅黑";
			
            cxt.strokeStyle = "purple";
            cxt.strokeText(text, 30, 50);

            cxt.fillStyle = "purple";
            cxt.fillText(text, 30, 100);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
  • 图片
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //创建image对象
            var image = new Image();
            image.src = "princess.png";

            image.onload = function () {
                var text = "绿叶学习网";
                cxt.font = "bold 22px 微软雅黑";
                var pattern = cxt.createPattern(image, "no-repeat");
                cxt.fillStyle = pattern;
                cxt.fillText(text, 10, 50);
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
  • princess.png
    在这里插入图片描述
mali378287007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
疯狂android资料：第十二章OpenGL与3D应用开发.doc
11-28
【OpenGL与3D应用开发】 在Android平台上，3D图形的开发主要依赖于OpenGL ES，这是OpenGL的一个嵌入式版本，特别为智能手机和平板电脑等移动设备设计。OpenGL ES是高效且灵活的图形库接口，它允许开发者创建复杂的...
HTML5，第十二章，综合应用实例
05-23
在第十二章的综合应用实例中，我们将深入探讨如何结合HTML5、CSS3和JavaScript来创建功能丰富的网页应用程序。这一章的内容涵盖了从基本元素到高级特性的全方位实践，旨在提升开发者将理论知识转化为实际项目的能力...
H5canvas(保存图片，globalCompositeOperation)
巧克力很苦的小博客
10-05 1159
保存图片 前言 canvas是画布的概念，那么canvas在浏览器表现出来的是一张图片 那么我们可以把这张图片右键保存(把canvas以图片的形式保存)（保存的图片格式是png(底部的透明的)） 那么怎么用js代码下载canvas图片 先在canvas上面画出一个实心圆来吧 CSS样式代码 <style> *{ margin:0; ...
canvas 基本用法
最新发布
似水流年QC的博客
07-05 3281
Canvas 是 HTML5 新增的元素，它就像一块幕布，可通过JavaScript脚本在 Web 页面上绘制图形、动画和其他可视化内容。四、canvas应用场景。一、什么是canvas。二、canvas用法。
Canvas的基本用法
da_shuai_bi_a的博客
03-07 197
Canvas的基本用法
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas
~~~
09-16 4888
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas
canvas——基本运用
Meat_doll的博客
07-22 152
老师讲的知识点，可能是同学，如有雷同
JAVA程序设计：第12章 建立GUI应用程序.ppt
07-13
第12章“建立GUI应用程序”主要讲解如何使用Java的AWT（Abstract Window Toolkit）库来创建丰富的图形界面。AWT是Java最早提供的GUI库，它提供了一系列基础组件和事件处理机制。 首先，我们来看Component类。...
第12章 滚屏动作类游戏——坦克大战.zip
03-19
通过学习和实践"坦克大战"的源代码，初学者可以逐步掌握Android游戏开发的基本技巧，同时也能了解到如何将这些技术应用到其他类型的游戏开发中。随着经验的增长，开发者还可以探索更多高级特性，如网络对战、物理...
《Html5 Canvas开发详解》示例代码
02-03
11. **第十一章**: 实战应用与案例分析 最后一章可能会提供一些实际项目案例，比如游戏、图表绘制、动画效果等，以加深读者对Canvas的理解并提升实战技能。 这些章节的代码示例将覆盖Canvas的各个方面，通过实践...
使用Canvas建立应用程序的欢迎界面
04-17
使用低级用户界面技术制作j2me应用程序的欢迎界面的方法
HTML5 Canvas 应用
08-16
HTML5 <canvas> 标签定义跟随鼠标图形和数字自增效果。
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
weixin_55846296的博客
06-09 9269
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
关于canvas的使用（超详细的canvas知识体系讲解）
adminsir0的博客
06-07 8658
canvas,js特效，图形绘制，路径绘制，图片绘制，动画效果，贝塞尔曲线
canvas的使用
廊坊吴彦祖
03-11 1373
canvas的使用 HTML5 < canvas > 标签是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素，是众多广泛使用的网络 2D 图像渲染标准之一，可以用于绘制图表、制作图片构图或者制作动画 canvas 元素本身并没有绘制能力（仅仅是图形的容器），它公开了一个或多个渲染上下文，必须使用脚本来完成实际的绘图任务 canvas基本使用 相比于 img 元...
canvas画布的简单应用
z983002710的博客
07-29 834
canvas画布的简单应用
canvas-应用大全
weixin_33670786的博客
03-08 790
前言 去年在公司内部做了一次canvas的分享，或者说canvas总结会更为贴切，但由于一直都因为公事或者私事，一直没有把东西总结成文章分享给大家，实在抱歉~ 分享这篇文章的目的是为了让同学们对canvas有一个全面的认识，废话不多说，开拔！ 介绍 Canvas是一个可以使用脚本（通常为Javascript，其它比如Java Applets or JavaFX/JavaFX Script）来绘制...
Canvas应用
weixin_33856370的博客
12-16 101
Canvas API 属性 width height 注意：在canvas标签中声明属性width=1000，与应用样式width:1000px或width:1000是不同的，在使用canvas API上会有偏差，必须使用前者进行声明，height亦是如此 方法 getContext(contextId) 获取CanvasRenderingContext2D对象并返回 toDataUR...
Canvas 应用
lanyue622的专栏
01-13 338
Canvas应用，主要是运用HTML5 canvas来实现的各种功能和效果。
HTML+JavaScript：打造iOS应用开发实战指南
编程接口（API）集成是关键，第9至12章涵盖了处理界面操作、触摸事件、特效和动画，以及与iOS系统服务的整合，如本地存储和网络请求。 更高级的主题如第14章的Canvas API，用于图形和动画处理；第15章探讨在线应用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值