JavaScript-canvas(画布)初识、刮刮卡简单练习

于 2024-04-07 01:55:16 发布
阅读量827 收藏 24
点赞数 30
分类专栏： 程序员 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84097696/article/details/137443986
版权
本文介绍了JavaScript canvas的基本用法，包括绘制文本、圆图像和视频、制作时钟，重点讲述了如何利用globalCompositeOperation实现刮刮卡效果。通过实例展示了不同复合模式的应用，提供了一套完整的Web前端开发学习资料。
摘要由CSDN通过智能技术生成

pencil.strokeStyle = “salmon”;

pencil.stroke()

在这里插入图片描述

绘制线条

Document

二、绘制文本

绘制文本

cvs.font = “30px 微软雅黑”;

Document

在这里插入图片描述

三、绘制圆图像、视频
Document

效果图

在这里插入图片描述

Document

在这里插入图片描述

四、时钟

save用于保存当前的画布状态，restore将画布状态重置到save保存时的样子。画布状态分为画布的坐标(transform)，画布绘制区域(clip)，画布中设置的组合方式(globalCompositeOperatio)。当我们在使用transform,clip和globalCompositeOperatio时会改变画布的状态，而这种改变会影响到接下来的画布绘制操作，所以在进行这种操作前需要使用save来对画布进行一次保存，在进行改变状态后的下一步操作中使用restore来重置画布状态。

Document

效果图

在这里插入图片描述

最低0.47元/天 解锁文章
2401_84097696
关注
专栏目录
canvas练习
qq_44361433的博客
04-07 264
1.绘制验证码 <canvas id="c1" width="300" height="150"></canvas> <script> var w=300; var h=150; function rn(max,min) { return parseInt(Math.random()...
JavaScript-canvas(画布)初识、刮刮卡简单练习，web移动web开发
最新发布
2401_84092143的博客
04-03 831
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
体会HTML5的canvas元素之图表练习源码
11-20
体会HTML5的canvas元素之图表练习源码
Canvas标签使用实例
princess_prince的专栏
03-13 185
&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
canvas练习1
zhangxiaochunxy的博客
03-02 177
canvas是一个可以使用js脚本在上面做2D画的html元素，是H5上面新出的标签。使用canvas，需要熟悉基本的html和JavaScript知识，现代浏览器基本都支持canvas， 尤其是在手机端，可以不考虑不支持canvas的状况。默认情况下，canvas的大小为300px*150px。 由于一些较旧的浏览器不支持html元素canvas，因此需要我们在canvas中间添加一部分内容，来...
JavaScript-Canvas-to-Blob:JavaScript Canvas to Blob是将画布元素转换为Blob对象的功能
04-13
JavaScript画布到Blob 内容 描述 画布斑点是一种对于不支持标准JavaScript的浏览器方法。 它可以用于从HTML 元素创建对象。 设置 通过NPM安装： npm install blueimp-canvas-to-blob 这会将JavaScript文件相对于...
QML--Canvas画布实现矩形圆形等圈定
01-10
它提供了JavaScript API，允许开发者直接在2D画布上绘制图形，包括但不限于矩形、圆形以及其他几何形状。QML（Qt Meta Language）是Qt框架的一部分，主要用于创建富交互式用户界面，而qt5是Qt框架的第五个主要版本，...
前端项目-javascript-canvas-to-blob.zip
09-03
这个“前端项目-javascript-canvas-to-blob.zip”包含了一个示例项目，帮助开发者理解并应用这一功能。 该项目的核心在于`canvas.toBlob()`方法。这个方法接收一个回调函数作为参数，当转换完成时，会将生成的Blob...
canvas_简单练习
weixin_30781433的博客
07-27 105
效果图 实现原理： 1.定义canvas标签。 2.获取canvas标签节点，创建canvas2D。 3.在canvas进行画图。 效果代码： 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"&gt...
HTML5 Canvas基础练习
Elliotbaird的博客
05-04 832
使用HTML5中的canvas来创建图形，创建矩形，渐变，图像裁剪，阴影：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用Canvas绘图</title> </head> <body> <canvas id="canvas" width="800" he
html5之canvas练习
weixin_30284355的博客
11-30 156
代码地址：github.com/peng666/blogs 在线地址：http://peng666.github.io/blogs/ 转载于:https://www.cnblogs.com/zpfind/p/6118448.html
个人练习小览---canvas学习
Finca_huang的博客
07-14 426
最开始学习canvas是为了在网页有一个酷炫的背景，当时看到心里就说，哇，这简直太酷炫了。但是canvas我学习一点之后发现是制作游戏的，敲了一段时间，大概是在2017年11月一直断断续续学习到2018年的2月份，最后制作了一个demo就没有继续学习了，因为最后发现这个学再久也不如在借鉴网友的代码去修改来理解得快，说我浮躁也好，基本语法会了之后就是将创意实现的过程，我暂时没有后者的实力，只能老老实...
史上最全的canvas详解及练习
WaNgLu:)的博客
10-27 2087
canvas介绍 1.什么是canvas（画布） -----canvas是HTML5新增的元素，可用于通过使用JavaScript中得到脚本来绘制图形 -----canvas看起来和<img>元素很像，唯一不同的就是他并没有src和alt属性。实际上，<canvas>标签只有两个属性：width和height -----&l...
canvas实现刮刮卡效果
一李
03-18 232
刮刮卡效果： 这里首先在加载图片作为背景的时候出现了问题，要把position设置为absolute，设置为绝对定位，使得图片跟随父元素的位置 学会使用canvas中的增加监听的功能 要获取鼠标的坐标，画布的坐标以及相对整个页面的坐标的- 牢记canvas使用的基本套路 注意stroke fill 的区别 使用save和restore控制样式容器 使用beginPath清空整个路径...
canvas练习1-基础
小银
03-12 773
canvas练习1-基础资料查询动态创建一个DOM掌握 document相关的函数练习(1)绘图资源1. 画笔练习(2)2. 画刷练习(3)3. 鼠标移动事件4. 鼠标点击事件5. 鼠标双击事件综合练习 资料查询 api函数文档查询地址：https://developer.mozilla.org/en-US/ 动态创建一个DOM 掌握 document相关的函数 查询某一个DOM 修改DOM相关的属性 创建一个新的DOM 练习(1) 在指定的一个div下创建一个canvas（画布) canvas可以适应
最简单的canvas基础+实践，确定不进来看看嘛
发果叁
12-17 1564
怎么突然提到canvas呢❓其实是因为工作中有一个小需求，就是给特定的区域做水印😤，思来想去😎就选择使用canvas去做，简单效果如下：实现思路🤷‍♂️：封装一个全局指令（这里案列是私有指令），利用canvas画出一块带水印文字的背景图，然后在需要的地方使用就行（很简单吧🥰）。不过这个不是重点，这次我们的重点是canvas。canvas即画布的意思，是HTML5新增的元素🆕，主要用来绘制图形。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染😲。
HTML5的 canvas完成刮刮卡功能
完善飞跃
05-10 1509
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;style&gt; .gg
【Html5每日练习】canvas笑脸
boia
04-11 8581
在某个论坛游荡的时候，看到一个笑脸图样，就用canvas写了一个，代码如下 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); context.strokeStyle = "blue"; context.lineWidth = 5;
探索aminogfx-canvas：Amino画布技术实现详解
资源摘要信息:"aminogfx-canvas是Amino项目的一个重要组成部分，它主要负责实现画布功能。Amino是一个开源的JavaScript图形库，它提供了一系列工具，用于创建二维图形、动画以及交互式可视化。在Web开发中，这样的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值