HTML5案例之蚊香、棒棒糖、爱心、五角星
2024-06-01 09:40:48
一、蚊香
<body><canvas id="mycanvas" width="400px" height="400px"><!-- 遇到不支持的浏览器 用于提示用户 --><h2>您的浏览器不支持canvas,请换成谷歌浏览器</h2></canvas><script type="text/javascript">var canvas = document.getElementById("mycanvas");var g = canvas.getContext("2d");var radius = 10;//半径var angle = 30;//角度g.lineWidth = 10;//线宽g.beginPath();g.moveTo(200,200);console.log(canvas.width/2,canvas.height/2);for(var i = 0;i<200;i++){radius += 0.75;angle += (Math.PI*2)/50;var x = canvas.width/2 + radius*Math.cos(angle);var y = canvas.height/2 +radius*Math.sin(angle);g.lineTo(x,y);}g.stroke();</script>
</body>
二、棒棒糖
<body><canvas width="300" height="600" id="canvas"></canvas><script>let canvas = document.getElementById('canvas');let context = canvas.getContext('2d');context.beginPath();context.strokeStyle = 'lightgray';context.strokeRect(96,100,8,400);for (let i = 100; i > 0 ; i = i-12) {context.beginPath();context.arc(100,100,i,0,360);//rgba直接生成的棒棒糖颜色会很丑，你可以将这段代码注释看效果// let color = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;//通过hsl颜色表示法，生成"艳"一点的颜色let color = `hsl(${Math.random()*360},80%,60%)`;context.strokeStyle = color;context.fillStyle = color;context.stroke();context.fill();}</script>
</body>
三、爱心
<body><canvas id="mycanvas" width="400px" height="400px"><!-- 遇到不支持的浏览器 用于提示用户 --><h2>您的浏览器不支持canvas,请换成谷歌浏览器</h2></canvas><script type="text/javascript">var canvas = document.getElementById("mycanvas");//创建画笔var context = canvas.getContext("2d");context.fillStyle = "red";context.beginPath();context.lineStyle = "red";context.moveTo(75,40)//左半边的桃心，从凹进去的地方开始画context.bezierCurveTo(75,40,70,25,50,25);context.bezierCurveTo(20,30,20,60,20,60);context.bezierCurveTo(20,80,40,102,75,120);//右半边的桃心，从桃心尖尖部分开始画context.bezierCurveTo(110,100,130,80,130,60);context.bezierCurveTo(130,65,130,25,100,25);context.bezierCurveTo(85,25,75,35,75,40);context.stroke();context.fill();</script>
</body>
四、五角星
//获取元素var c = document.getElementById("canvas");var context = c.getContext("2d");//绘制五角星context.beginPath();//moveTo(x,y):将绘图游标移动到（x,y），不画线context.moveTo(0,100);//lineTo(x,y):从上一点开始绘制一条直线，到(x,y)为止。context.lineTo(300,100);context.lineTo(60,300);context.lineTo(150,0);context.lineTo(240,300);context.closePath();context.stroke();context.beginPath();context.moveTo(300,100);context.lineTo(420,100);context.lineTo(450,0);context.lineTo(480,100);context.lineTo(600,100);context.lineTo(510,180);context.lineTo(540,300);context.lineTo(450,230);context.lineTo(360,300);context.lineTo(390,180);context.closePath();context.stroke();context.fillStyle="red";context.beginPath();context.moveTo(600,100);context.lineTo(720,100);context.lineTo(750,0);context.lineTo(780,100);context.lineTo(900,100);context.lineTo(810,180);context.lineTo(840,300);context.lineTo(750,230);context.lineTo(660,300);context.lineTo(690,180);context.fill();//五角星结束
HTML5案例之蚊香、棒棒糖、爱心、五角星相关推荐
- HTML5七夕情人节表白网页(爱心雨-满屏爱心飘落)HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤(爱心雨-满屏爱心飘落)❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
- HTML5+jQuery制作温馨浪漫爱心表白动画特效
原文地址为: HTML5+jQuery制作温馨浪漫爱心表白动画特效 原文:HTML5+jQuery制作温馨浪漫爱心表白动画特效 html5相关代码下载:http://www.zuidaima.com/ ...
- HTML5 案例学习笔记
目录 1 meta标签 1.1 简介 1.2 属性及取值 1.3 案例 2 常用标签 2.1 标题 2.2 段落 2.3 换行 2.4 水平分隔线 2.5 删除线 2.6 下划线 2.7 加粗 2. ...
- 【前端小案例】浪漫动态爱心
爱心 1. 案例简介 2. 爱心实现 2.1 盒子模型 2.2 CSS样式 2.3 JS实现动效 3. 完整源码 1. 案例简介 最近网剧<点燃我,温暖你>热映,相信广大男同胞的女朋友都在 ...
- 表白html特效在线,html5 canvas酷炫表白爱心动画特效
特效描述:酷炫表白动画 表白爱心动画 动画特效.html5爱心动画 代码结构 1. 引入JS 2. HTML代码 var container; var camera, scene, renderer; ...
- php html5 案例,35个非常好的HTML5+CSS3实例
Apple.com的导航菜单,只使用了CSS3. 跨浏览器的按钮类. CSS和DIV的结合使用,圆角角度控制. CSS3的RGBa属性,透明度设置. 时尚的CSS3表单. 你需要知道的5个有用的CSS ...
- html5 ocr图片识别,OCR识别控件LEADTOOLS HTML5案例：整页OCR识别
由于移动设备的处理能力和储存空间限制,在移动设备上执行光学字符识别(OCR)一直以来都是一项较大的挑战.随着LEADTOOLS HTML5的出现,在移动设备上执行光学字符识别(OCR)变成可能.凭借L ...
- 图形图像处理案例1——蚊香画生成器
可在抖音和淘宝搜索一下蚊香画的概念,其实这是一种艺术画.简单点说,就是类似于前些年流行的<秘密花园>一样,给你一幅图,你可以在这幅图上进行填色,根据你的填色效果可以得到不同的结果.蚊香画也 ...
- 传智播客html5案例,html5 传智播客
<HTML5 CSS3网站设计基础教程>是Web前端开发工程师的入门读物,本书配套有PPT.课程设计.教学视频.课后练习及答案等学习资源,合适初学者学习. ¥39.00定价:¥45.87( ...
最新文章
- 流网络的最小割问题c语言,「网络流24题」最小路径覆盖问题
- 学生计算机教室管理规章制度,学校规章制度之小学信息技术教室管理制度
- 用Fiddler抓取手机APP数据包
- PHP常用的代码编辑工具
- python butter带通滤波器滤波出来的信号有NAN值或者分类效果极差
- unity摄影机depth模式_Unity3D Camera 摄像机属性详解
- android 支付模块封装,Android集成支付----支付宝支付总结与封装
- redis java api 单例_Java API 操作Redis
- activiti利弊_事件驱动的安全性的利弊
- 淘宝分布式NOSQL框架：Tair
- 使用postman模拟上传文件到springMVC的坑：the request was rejected because no multipart boundary was found...
- gitt之设置和取消代理
- 如何批量删除Word中向下箭头的符号
- python调用foxmail 发邮件_使用Python发送邮件
- solaris学习6：帐号、安全管理
- JAVA虚拟机、Dalvik虚拟机和ART虚拟机
- 关于在vue项目中引入pdf.js的跨域问题（已解决）。
- 移动端页面性能优化方案
- python 多任务
- js控制form提交的action