HTML5 画的小浪 代码

最新推荐文章于 2023-03-10 08:00:00 发布
最新推荐文章于 2023-03-10 08:00:00 发布
阅读量98 收藏
点赞数
分类专栏： xhtml/css 文章标签： HTML5 JavaScript HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/snow__ice/article/details/83679969
版权 
<!DOCTYPE HTML>
<html>
  <head>
    <title>A canvas moveto example</title>
  </head>
  <body>

    <div>
      <canvas id="tutorial" width="150" height="150"></canvas>
    </div>
	 <script type="text/javascript">
        var canvas = document.getElementById('tutorial');
          var ctx = canvas.getContext('2d');
        ctx.beginPath();
			ctx.moveTo(22,14);
			ctx.quadraticCurveTo(8,20,5,34);
			ctx.bezierCurveTo(2, 48, 20, 50, 27, 49);
			ctx.bezierCurveTo(35, 48, 48, 39, 46, 32);
			ctx.bezierCurveTo(44, 25, 38, 28, 38, 28);
			ctx.quadraticCurveTo(39,22,38,21);
			ctx.bezierCurveTo(37, 21, 35, 20, 34, 21);
			ctx.bezierCurveTo(30, 21, 28, 23, 27, 24);
			ctx.bezierCurveTo(26, 24, 27, 22, 27, 22);
			ctx.quadraticCurveTo(28,12,22,14);
			ctx.fillStyle = "#f93b00";
			ctx.fill();
	
		ctx.beginPath();
			ctx.moveTo(19,29);
			ctx.quadraticCurveTo(8,32,8,39);
			ctx.bezierCurveTo(8, 46, 21, 50, 31, 45);
			ctx.bezierCurveTo(41, 41, 40, 34, 37, 32);
			ctx.bezierCurveTo(34, 29, 28, 27, 19, 29);
          	ctx.fillStyle = "#ffffff";
			ctx.fill();
		ctx.beginPath();
			ctx.moveTo(15,40);
    		ctx.quadraticCurveTo(16,34,22,32);
			ctx.bezierCurveTo(28, 31, 29, 36, 29, 38);
   			ctx.bezierCurveTo(29, 40, 25, 46, 20, 45);
			ctx.bezierCurveTo(17, 45, 14, 42, 15, 40);
			ctx.fillStyle = "#09090a";
			ctx.fill();
		
		ctx.beginPath();
			ctx.moveTo(18,40);
    		ctx.quadraticCurveTo(19,37,21,37);
			ctx.bezierCurveTo(24, 37, 23, 41, 21, 42);
   			ctx.bezierCurveTo(18, 43, 17, 41, 18, 40);
			ctx.fillStyle = "#ffffff";
			ctx.fill();
    </script>
  </body>

</html>

 原理特简单，画曲线。。。。很低级。。。

snow__ice
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
es6:es6添加以及部分功能实现原始代码-小浪哥笔记
03-23
让&& const.js es6声明方式 tmpl-string.js 串口模板，及使用。 spread.js 剩余运算符，以及深拷贝浅拷贝案例。... es5代码简单实现es6中的proimse。 promise.js，promise2.js es6的promise的使用。
C语言学习笔记——小浪神
10-04
C语言学习笔记——小浪神 本笔记是关于C语言的学习笔记，涵盖了C语言的基本概念、历史发展、语言特点、数据类型、变量、常量、算法等方面的知识点。 计算机程序的概念 计算机程序是指一组能够被计算机识别和执行...
canvas学习（一）canvas宽高异常，fillStyle的使用，demo：黑客帝国代码雨plus
spray_wave的博客
09-07 601
首先一个小demo,来说明一下canvas简单的属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Document</title> </head> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;
斐波那契数列
weixin_30679823的博客
03-07 1060
斐波纳契数列（Fibonacci Sequence），又称黄金分割数列，指的是这样一个数列：1、1、2、3、5、8、13、21、……在数学上，斐波纳契数列以如下被以递归的方法定义：F0=0，F1=1，Fn=F(n-1)+F(n-2)（n>=2，n∈N*）在现代物理、准晶体结构、化学等领域，斐波纳契数列都有直接的应用，为此，美国数学会从1960年代起出版了《斐波纳契数列》季刊，专门刊载这方...
js阻止事件冒泡和默认事件（右键点击）
spray_wave的博客
08-18 1082
话不多说，上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{
JavaScript笔记
dengxiang4093的博客
09-18 1621
JavaScript 1.基本认识 1.1 可以直接在标签中添加事件 <div id="wrap" onclick="alert(123);">123</div> <a href="javascript:void(0);">gogogogogo</a> <a href="javascript:alert('a标签被点击了!');"...
1万字精讲，这你还学不废？Python爬取腾讯视频《斛珠夫人》弹幕，并转换成词云（单线程）——爬虫实例2
小浪宝宝的博客
11-19 1279
hello,大家好，我是小浪宝宝，一个想凭借自己双手活下去的00后，想把自己的思路详细的分享给大家，励志让即使没有学过编程的人看到我的分享，就会使用程序。????????????????????好了，话不多说，切入今天的主题。最近杨幂和陈伟霆主演的《斛珠夫人》正在热映，弹幕连连，最近呢，学了一些爬虫，就想着把爬虫知识用于实践，就将弹幕爬取了下来，又了解到Python可以将词做成特定的词云，想想都好玩，快来一起看看吧。 1.数据获取 ...
解决R语言wordcloud2不能自定义图形的问题
weixin_62958065的博客
03-10 466
两步解决wordcloud2不能自定义词云图形状
通过jsp实现省市区县四级联动菜单
热门推荐
06-29 5万+
【所要达到的效果如下】【代码如下】Area.jsp&lt;%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3
Spring WebFlux开门迎客，却来了一位特殊客人
weixin_30551963的博客
04-24 99
话说Spring WebFlux已经出现有一段时间了，但是知道他的人并不是很多。这让他很是闷闷不乐。 还有更惨的是，那些敢于吃螃蟹的人在尝试了他之后，有的竟把代码重新改回到Spring MVC的同步模式。 Spring WebFlux一方面反思自己，一方面决定化身为一家西餐厅，慢慢向周边老百姓推销自己。 风声传到了Spring MVC耳朵里，他决定前去试探一番，看看这个同...
苏浪浪 201771010120 十二周
weixin_30763397的博客
11-18 82
实验十二 图形程序设计 实验时间 2018-11-14 1、实验目的与要求 (1) 掌握Java GUI中框架创建及属性设置中常用类的API； (2) 掌握Java GUI中2D图形绘制常用类的API； (3) 了解Java GUI中2D图形中字体与颜色的设置方法； (4) 了解Java GUI中2D图像的载入方法。 2、实验内容和步骤 实验1： 导入第10章示例程序，测试程序并...
《机器学习及R语言应用》陈强 课后习题代码
03-07
本代码压缩包是陈强教授的《机器学习以及R语言应用》的课后习题答案，从第四章到第十八章所有课后习题代码均有包含，所有代码经本人亲自运行，均能正常运行出所需结果。 但，代码集当中的命名仅是作为示范，并非如此...
纯html模板
11-30
在学习ASP或PHP时，纯HTML模板可以作为静态页面的蓝本，开发者可以在模板基础上添加服务器端代码，如通过ASP的`<%...%>`或PHP的`<?php...?>`来执行计算、数据查询、用户交互等功能。这种方式有助于开发者将静态设计...
数据结构C语言代码实现
10-29
5. **排序与查找算法**：冒泡排序、插入排序、选择排序、快速排序、归并排序、堆排序等排序算法，以及顺序查找、二分查找、哈希查找等查找算法。排序和查找是数据处理的基础，优化这些算法能极大提升程序效率。 6. ...
聚类算法-一种无监督学习方法.docx
最新发布
08-12
聚类算法是一种无监督学习方法，用于将数据集中的数据点自动分组到不同的类别中，这些类别也称为“簇”或“群”。聚类的目标是让同一簇内的数据点尽可能相似，而不同簇之间的数据点尽可能不相似。聚类算法广泛应用于多种领域，如数据挖掘、模式识别、图像分析、信息检索等。 聚类算法的基本概念 无监督学习：聚类算法不需要事先标记数据点的类别标签，而是根据数据本身的相似性来分组。 相似性度量：聚类算法依赖于某种相似性或距离度量来决定数据点之间的相似程度。常用的度量包括欧氏距离、曼哈顿距离等。 目标函数：大多数聚类算法都会尝试最小化某种目标函数，例如簇内的平方误差和（SSE）。 常见的聚类算法 K-Means K-Means 是一种原型聚类算法，它通过迭代地将数据点分配到最近的质心来形成簇，并重新计算每个簇的质心，直到质心不再显著变化为止。 在 Python 的 scikit-learn 库中，可以通过 KMeans 类实现 K-Means 聚类。 层次聚类 层次聚类构建一个树状图（称为树状图或 dendrogram），显示数据点是如何逐渐合并成簇的。 这种算法可以是凝聚型（自底向上）或分裂型（自顶向下）。
45ft集装箱模型3D图纸 STEP格式.zip
08-12
45ft集装箱模型3D图纸 STEP格式.zip
Spring Boot网吧管理系统.zip
08-12
该系统严格按照需求分析制作相关模块，并利用所学知识尽力完成，但是本人由于学识浅薄，无法真正做到让该程序可以投入市场使用，仅仅简单实现部分功能，希望日后还能改善。 本系统具有以下优点： 该系统具有较高的适用性，选用B/S结构，可以在绝大部分个人平台上使用该系统。 系统将用户权限进行划分，管理员，网管和会员都能看到及操作的信息不一样，三者具备不同的操作权限。 该系统操作界面简单明了，大部分人都可以正常使用。 但也存在以下问题需要改进： 运行时窗口不能被刷新，可以改进。 系统过于简单，显示的信息有限。。 不能添加多个管理员账号，如果可以则将利于发展网吧规模，便于网吧信息集中管理。 不能实时预约接待消息和网吧反馈建议，容易被忽视，不利于管理员服务客户。
微信小程序大作业 新闻小程序
08-12
微信小程序大作业 新闻小程序
php socket代码详解
06-09
以下是一个简单的PHP Socket代码示例，包括了创建Socket、绑定端口、监听连接请求、接受连接、发送和接收数据等基本操作。代码注释详细解释了每个步骤的含义和作用。 ```php <?php // 创建Socket $socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP); if ($socket === false) { echo "socket_create() failed: reason: " . socket_strerror(socket_last_error()) . "\n"; exit; } // 绑定端口 $address = '127.0.0.1'; $port = 12345; $result = socket_bind($socket, $address, $port); if ($result === false) { echo "socket_bind() failed: reason: " . socket_strerror(socket_last_error($socket)) . "\n"; exit; } // 监听连接请求 $result = socket_listen($socket, 5); if ($result === false) { echo "socket_listen() failed: reason: " . socket_strerror(socket_last_error($socket)) . "\n"; exit; } echo "Server started on $address:$port\n"; // 接受连接 while (true) { $clientSocket = socket_accept($socket); if ($clientSocket === false) { echo "socket_accept() failed: reason: " . socket_strerror(socket_last_error($socket)) . "\n"; break; } echo "Client connected\n"; // 发送数据 $message = "Hello, client!"; socket_write($clientSocket, $message, strlen($message)); // 接收数据 $buffer = ''; while (($len = socket_recv($clientSocket, $buf, 2048, MSG_WAITALL)) !== false) { $buffer .= $buf; if ($len < 2048) { break; } } echo "Received data: $buffer\n"; // 关闭连接 socket_close($clientSocket); } // 关闭Socket socket_close($socket); ``` 在这个例子中，我们首先使用socket_create函数创建了一个Socket，然后使用socket_bind函数将其绑定到指定的IP地址和端口号。接着，使用socket_listen函数开始监听连接请求，最后使用socket_accept函数接受连接。当有客户端连接时，我们发送了一条欢迎信息，并使用socket_recv函数接收客户端发送的数据。当客户端断开连接时，我们使用socket_close函数关闭连接。最后，使用socket_close函数关闭Socket。 这只是一个简单的例子，实际上，Socket编程可以实现非常复杂的网络应用程序。在实际应用中，我们需要根据具体需求进行定制化开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值