HTML5利用canvas绘制太极图案

最新推荐文章于 2024-04-20 16:29:18 发布
最新推荐文章于 2024-04-20 16:29:18 发布
阅读量8.5k 收藏 9
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhengzixiang666/article/details/56674156
版权

代码如下：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="600" height="400" style="background-color: #EED2EE; ">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
//绘制左侧的白色半圆直径都是150
cxt.fillStyle="#FFFFFF";
cxt.beginPath();
cxt.arc(300,200,150,1.5*Math.PI,Math.PI/2,false);
cxt.closePath();
cxt.fill();
//绘制右侧的黑色半圆
cxt.fillStyle="#000000";
cxt.beginPath();
cxt.arc(300,200,150,Math.PI/2,1.5*Math.PI,false);
cxt.closePath();
cxt.fill();
//绘制下面的黑色圆
cxt.fillStyle="#000000";
cxt.beginPath();
cxt.arc(300,275,75,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
//绘制上面的白色圆
cxt.fillStyle="#FFFFFF";
cxt.beginPath();
cxt.arc(300,125,75,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
//绘制两个小圆
cxt.fillStyle="FFFFFF";
cxt.beginPath();
cxt.arc(300,275,10,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
//绘制黑色小圆
cxt.fillStyle="#000";
cxt.beginPath();
cxt.arc(300,125,10,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>



zhengzixiang666
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html太极旋转css,纯CSS3技术——制作一个旋转的太极
weixin_36418590的博客
06-20 382
制作一个太极效果就是下面这个样子的：怎么样很帅吧~嘿嘿~首先还是分析一下如何实现这个图形，先来规划好位置~我们先来做一半，剩下的一半直接复制代码，修改一下参数就好了~第一步：首先由三个矩形，做好大致的骨架~第二步：修改样式(形状、背景色等等)。(领会精神就好，这毕竟是个草图)第三步：完成另一半的制作并且添加动画效果。这样我们的太极动画效果就完成了是不是超级简单~好的~现在我们开始动手操作吧~先来规...
HTML和CSS------太极图
weixin_52953038的博客
08-12 2995
思路： 1、画出两个长方形 2、把两个长方形，拼成一个正方形 3、把拼成的正方形放到一个与之匹配的正方形中 4、把正方形的边角，锐化成圆 5、把左边‘长方形’背景设为白色，把边‘右长方形’背景设为黑色， 6、取‘长方形’宽为直径画圆，并把圆背景设为白色放到正方形的对称轴上，圆的上边与正方形的上边相切 7、取‘长方形’宽为直径画圆，并把圆背景设为黑色放到正方形的对称轴上，圆的上边与正方形的下边相切 8、取两个小圆，一黑一白，补全太极图......
Web前端学习 09 css3实现太极图
weixin_42468212的博客
07-30 823
昨天学习了CSS3基础的部分知识，并用所学的内容做出了一个旋转的太极图。 先总结所学的内容吧！ css3基础 1.边框 border-radius：用于创建圆角 border-image：使用图片创建边框 box-shadow：用来添加阴影 2.背景 background-size: 300px 300px; background-size: 50% 100%; background-size: ...
Canvas[详解] —— 一篇教你学会Canvas和如何快速绘制图形
最新发布
Lan_0316的博客
04-20 2140
Canvas是HTML5中的一个标签，用于在网页上动态生成图像和图形。
【HTML5】在canvas上绘制简单的2D图形 （+太极图）
jingjing的博客
08-19 1547
canvas（画布） canvas 元素是H5中新增的一个重要元素，专门用来绘制图形。在页面中放置一个canvas元素，就相当于在页面上放置一块画布，可以利用 canvas api 在其中进行图形的描绘。 <canvas id="app" height="300" width="400" style="background-color: #f5f5f5;"> </canvas> <script> //获取canvas元素 var app = document.qu
html 绘制太极
热门推荐
zww学习笔记
10-15 1万+
太极的绘制主要需要用到5个圆，具体代码如下：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .bigCircle{ width: 200px; height: 200px;
canvas绘制太极图的实现示例
01-21
看到了很多人写的太极图案，自己也来搞一下，今天就来介绍一下 css样式代码 .animation{ width: 800px; height: 800px; border: 1px solid #000; } #canvas{ animation: rotate 6s linear infinite; } /* 给...
JS用Canvas绘制太极图.
11-15
本项目“JS用Canvas绘制太极图”利用了HTML5的Canvas API，结合DCloud移动开发平台，实现了在移动APP和浏览器环境中展示动态的太极图案。 首先，让我们了解一下Canvas的基本概念。Canvas是一个HTML5元素，它的主要...
Android 绘制太极图实例详解
08-31
通过自定义View并利用Android的Canvas API，我们可以轻松地在应用中实现复杂的图形绘制，如太极图。这个实例不仅适用于太极图，也可以作为自定义图形的基础，稍作修改即可应用于其他形状的绘制。
一个由JavaScript和HTML5写的太极小程序.zip
07-14
在太极小程序中，HTML5的`<canvas>`元素可能是核心，它提供了一个画布，JavaScript可以在这上面绘制太极图。此外，HTML5的一些新特性，如离线存储、多媒体支持（音频、视频）和表单控件，可能会被用来增强用户体验。...
一个简单的HTML写的太极图
04-17
简单的太极界面
css3 实现 太极图
她的猿的博客
05-22 1340
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;太极图&lt;/title&gt; &lt;style type="text/css"&gt; .taiji{position: relative;
太极图用html做的原理,用HTML画个太极图
weixin_28866737的博客
06-08 428
无标题文档window.onload = function(){var ctx = document.getElementByIdx_x_x_x("pic").getContext('2d');//绘制白色半圆的代码如下：ctx.beginPath();ctx.arc(200,200,80,1.5*Math.PI,Math.PI/2,false);ctx.fillStyle="white";ctx...
WEB小实践(2)--太极图
weixin_40025586的博客
10-20 335
** 一.知识略解： ** 1.渐变色：linear-gradient:(direction, color-stop1, color-stop2, …) 例如：linear-gradient(#000 50%,#fff 50%);//direction默认方向是to bottom,即向下填充linear-gradient(#000 50%,#fff 50%); 2.弹性盒模型：display:fl...
js使用canvas画布画太极图案
qq_43143992的博客
11-04 645
代码如下： &lt;body&gt; &lt;canvas id="mycanvas"&gt;&lt;/canvas&gt; &lt;script type="text/javascript"&gt; var c=document.getElementById('mycanvas'); c.width=600; ...
css3制作太极图
qq_44711316的博客
11-10 454
CSS3实现自转太极图 动态的，是有动画效果的，只是我没弄gif格式 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
CSS3之太极图源代码
weixin_30305735的博客
07-28 1295
　　太极图实现起来很简单，就是把多个标签利用border-radius设置成圆形，然后多个圆利用position定位重叠在一起　　 代码如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>太极图</t...
HTML5使用canvas绘制警示牌
03-26
HTML5中的canvas元素可以用于绘制各种图形，包括警示牌。下面是使用canvas绘制警示牌的基本步骤： 1. 创建canvas元素： 在HTML文件中，使用`<canvas>`标签创建一个canvas元素，并设置宽度和高度。 ```html <canvas id="myCanvas" width="400" height="200"></canvas> ``` 2. 获取canvas上下文： 使用JavaScript获取canvas元素的上下文对象，以便进行绘制操作。 ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ``` 3. 绘制警示牌： 使用上下文对象的绘制方法，如`fillRect()`、`fillText()`等，来绘制警示牌的各个部分。 ```javascript // 绘制背景 ctx.fillStyle = "red"; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制文字 ctx.font = "30px Arial"; ctx.fillStyle = "white"; ctx.fillText("警示", 150, 100); ``` 4. 添加样式和效果： 可以通过设置上下文对象的属性，如`font`、`fillStyle`等，来调整警示牌的样式。还可以使用绘制方法和路径操作方法，如`strokeRect()`、`lineTo()`等，来添加边框、图案等效果。 完成以上步骤后，就可以在canvas中绘制出一个简单的警示牌了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值