一小段html5代码

最新推荐文章于 2022-12-05 22:07:00 发布
最新推荐文章于 2022-12-05 22:07:00 发布
阅读量597 收藏
点赞数
分类专栏： html 文章标签： html5 html browser canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guxinaiheqiao/article/details/39228981
版权 
<html>
<head>
<title>
Serenityfire
</title>
</head>

<body>
<canvas id="a" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<script type="text/javascript">
// Set up!
var a_canvas = document.getElementById("a");
var context = a_canvas.getContext("2d");

// Draw the face
context.fillStyle = "yellow";
context.beginPath();
context.arc(95, 85, 40, 0, 2*Math.PI);
context.closePath();
context.fill();
context.lineWidth = 2;
context.stroke();
context.fillStyle = "black";

// Draw the left eye
context.beginPath();
context.arc(75, 75, 5, 0, 2*Math.PI);
context.closePath();
context.fill();

// Draw the right eye
context.beginPath();
context.arc(114, 75, 5, 0, 2*Math.PI);
context.closePath();
context.fill();

// Draw the mouth
context.beginPath();
context.arc(95, 90, 26, Math.PI, 2*Math.PI, true);
context.closePath();
context.fill();

// Write "Hello, World!"
context.font = "30px Garamond";
context.fillText("Hello, World!",15,175);
</script>
</body>

</html>


奈河桥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python小段代码_一小段代码的实现笔记-Python版
weixin_36345456的博客
02-03 213
目标读取 Excel 数据写入 Postgresql 表，参见另一个版本思路将 Excel 数据载入 Pandas.DataFrames，对于 etl 来说 pandas 也是一个不错的工具拼装 SQL 语句模板，有点像乐高装填并执行 SQL 语句Part I 载入读取 Excel 文件有多种方法，xlwings 并不适合数据 ETL，Pandas 使用 xlrd 库支持 Excel 文件读取，参...
一段html代码,一段html代码
weixin_36170009的博客
06-03 181
using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Text;using System.Text.RegularExpressions;using HtmlAgilityPack;namespace ConsoleApplication1{class Progra...
一小段代码
kuaiie1314的博客
05-18 130
[code="js"] (function(){ alert(); })()//这样就能执行这个方法---------------------------------------------------------------------------------------------------------------------------------------------------...
一段小代码
weixin_30394633的博客
08-15 102
from collections import dequeclass Person(): def __init__(self,name,sex,isMG): self._name=name self._sex=sex self._isMG=isMG @property def isMG( self ): return sel...
一款用于倒计时的html5代码
05-03
这款名为“一款用于倒计时的html5代码”的资源是一个前端开发工具，主要适用于创建倒计时功能，如考试倒计时或商品促销倒计时等应用场景。它基于HTML5技术，结合CSS和JavaScript，提供了灵活的自定义选项，允许...
HTML5带背景音乐播放器代码
06-24
这段JavaScript代码实现了以下功能： 1. 点击播放按钮时，根据音频当前状态播放或暂停音乐。 2. 改变音量控制滑块的值时，调整音频的音量。 3. 当用户点击歌曲列表中的项时，更新音频源并开始播放新的歌曲。 在实际...
HTML5超级玛丽小游戏源代码
01-18
HTML5超级玛丽小游戏是一款利用HTML5、CSS3和JavaScript技术开发的在线游戏，它复刻了经典的任天堂FC游戏——超级玛丽。这个源代码提供了一个学习和研究HTML5游戏开发的绝佳实例，让我们来深入探讨其中涉及的关键...
16宫格翻牌匹配HTML5小游戏代码
06-01
【标题】：“16宫格翻牌匹配HTML5小游戏代码”是基于HTML5技术实现的一款互动游戏，旨在训练玩家的记忆力和观察力。这款游戏的核心机制是玩家需要记住翻开的图片，然后通过匹配相同图片来完成游戏。 【描述】：这款...
一小段java代码_一小段JAVA代码
weixin_30322901的博客
02-26 131
楼主你好，不知道我的解释是否到位？=============================================== daysModel = new AbstractTableModel() { //使用匿名内部类新建一个表格模型对象 public int getRowCount() { //获取总行数 r...
如何用一小段代码体现你的技术！
wengpiwang的博客
02-15 477
昨天逛论坛时发现一个很好玩的题目——如何用一小段代码体现你的技术！ 然后发现了一段比较有意思的代码，分享给大家： int [] i = { 1,12,112,500,5331,57771 }; foreach (var item in i) { new Thread(() =&gt; ...
关于早期的一小段代码的解析
itaiit （https://github.com/itaiit/）
01-25 278
代码的来源已不记得，只是在分析代码的时候觉得学到了很多的思路，特此记录:)点击下载此资源源代码的目录结构:|--java |--bean |--bll |--dal |--dao |--db |--struts |--tld |--util |--util |--ApplicationResource.propertie
零基础HTML教程(5)--开始写HTML代码
程序员大阳
09-10 6798
本文目录1. 什么是HTML2. 为啥叫HTML3. 什么是标记4. HTML的标记5. 编写第一段HTML网页代码6. 小结 1. 什么是HTML 在上一章的学习中，我们已经开发了一个空白的网页。但是空白的网页啥作用呢？ 毫无作用啊！！ 所以我们需要设计一个好看的，有内容的网页，而HTML语言，就是用来编写网页内容的语言。 我们使用HTML语言规范编写的网页，浏览器就能按照相应的规则展示我们设计的内容。 2. 为啥叫HTML HTML，英文全称HyperText Markup Language，翻译为中文
第一段HTML５代码
颤抖的羽翼
08-12 895
HTML５可以说是最近非常火的一个名词，尤其在flash的诸多漏洞被曝光后，其安全性广受诟病，而可以取代flash的新一代超文本标记语言HTML5则收到人们的极力推崇，在这种大环境下鄙人也对HTML5产生了浓厚的兴许，最近尝试这学习了一下，完成来我的第一段表单代码： 　　　　 　　　 注册 昵称： 密码： 请完善您的基本信息： 性别： 男 女
HTML介绍以及常用代码
热门推荐
Xiaohuang的博客
12-05 1万+
HTML
超实用的30 个简短的代码片段（一）
qq_46614154的博客
04-02 4020
前言 文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。 作者：NicePython PS：如有需要Python学习资料的小伙伴可以加点击下方链接自行获取http://t.cn/A6Zvjdun Python是目前最流行的语言之一，它在数据科学、机器学习、web开发、脚本编写、自动化方面被许多人广泛使用。 它的简...
在canvas上面拖拽对象。
weixin_30915951的博客
04-12 387
原文：https://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/ 下面作者的原始的版本会抖动一下（鼠标刚点下去的时候，位置会发生一下突变，不是很友好）， 我修改了 一下。 var xDown , yDown;function myDown(e){ if (e.pageX < x + 15 + canvas.of...
用HTML5编写一段烟花代码
最新发布
02-26
以下是一个使用HTML5编写的简单烟花代码示例： ```html <!DOCTYPE html> <html> <head> <title>烟花效果</title> <style> canvas { position: absolute; top: 0; left: 0; z-index: -1; } </style> </head> <body> <canvas id="fireworks"></canvas> <script> var canvas = document.getElementById("fireworks"); var ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var particles = []; var particleCount = 100; var colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"]; function Particle(x, y) { this.x = x; this.y = y; this.color = colors[Math.floor(Math.random() * colors.length)]; this.radius = Math.random() * 20 + 10; this.vx = Math.random() * 5 - 2.5; this.vy = Math.random() * 5 - 2.5; this.alpha = 1; this.gravity = 0.05; } Particle.prototype.draw = function() { ctx.globalAlpha = this.alpha; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.fillStyle = this.color; ctx.fill(); ctx.closePath(); }; Particle.prototype.update = function() { this.x += this.vx; this.y += this.vy; this.alpha -= 0.01; this.radius -= 0.1; this.vy += this.gravity; }; for (var i = 0; i < particleCount; i++) { var x = canvas.width / 2; var y = canvas.height / 2; var particle = new Particle(x, y); particles.push(particle); } function loop() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < particles.length; i++) { particles[i].draw(); particles[i].update(); if (particles[i].alpha <= 0) { particles.splice(i, 1); } } requestAnimationFrame(loop); } loop(); canvas.addEventListener("click", function(event) { var x = event.clientX; var y = event.clientY; for (var i = 0; i < particleCount; i++) { var particle = new Particle(x, y); particles.push(particle); } }); </script> </body> </html> ``` 这个代码创建了一个画布元素，并在画布上绘制了彩色的圆形粒子。通过点击鼠标可以在画布上添加更多的粒子，从而形成烟花效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值