HTML5 Canvas 绘制太极图

最新推荐文章于 2021-12-08 16:56:08 发布
最新推荐文章于 2021-12-08 16:56:08 发布
阅读量369 收藏
点赞数
文章标签： javascript ViewUI

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>太极图</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="204px" height="204px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
    function draw(){
        var canvas=document.getElementById("myCanvus");
        var context=canvas.getContext("2d");

        context.fillStyle = "#336699";
        context.fillRect(0, 0, 204, 204);
        context.translate(102,102);
        //context.rotate(Math.PI/6);
        
        var r=100;// 半径

        context.beginPath(); 
        context.arc(0,0,r,0,getRad(360),false); 
        context.fillStyle="white"; 
        context.closePath(); 
        context.fill(); 

        context.beginPath(); 
        context.arc(0,0,r,getRad(90),getRad(270),false);
        context.fillStyle="black"; 
        context.closePath(); 
        context.fill();

        context.beginPath(); 
        context.arc(0,0,r,getRad(270),getRad(90),false);
        context.fillStyle="white"; 
        context.closePath(); 
        context.fill();

        context.beginPath(); 
        context.arc(0,-r/2,r/2,getRad(90),getRad(270),false);
        context.fillStyle="white"; 
        context.closePath(); 
        context.fill();

        context.beginPath(); 
        context.arc(0,r/2,r/2,getRad(270),getRad(90),false);
        context.fillStyle="black"; 
        context.closePath(); 
        context.fill();

        context.beginPath(); 
        context.arc(0,-r/2,r/8,getRad(0),getRad(360),false);
        context.fillStyle="black"; 
        context.closePath(); 
        context.fill();

        context.beginPath(); 
        context.arc(0,r/2,r/8,getRad(0),getRad(360),false);
        context.fillStyle="white"; 
        context.closePath(); 
        context.fill();
    }

    function getRad(degree){
        return degree/180*Math.PI;
    }
//-->
</script>

 

weixin_33691700
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS用Canvas绘制太极图.
11-15
1.本项目是基于Dcloud的有一个移动APP项目 2.html5页面同时支持浏览器中访问 (绘制太极界面可以直接在浏览器中运行)
HTML5 Canvas组件绘制太极图案
web开发
02-03 279
一实现思路： 实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆，首先绘 制两个半圆，分别为黑色和白色，组成一个圆，绘制完成以后再分别绘制一个黑色 和白色的圆在绘制好的黑白圆之内，半径恰好是黑白大圆一半。 最后在绘制好的两 个黑白小圆内分别填充白色和黑色的点，半径大小为10pixel左右。 二程序效果如下： ...
canvas绘制太极图
ramosTears123的博客
03-25 420
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border: 1px ...
使用canvas绘制太极
qq_31800209的博客
09-08 836
太极图 今天学习canvas，哈哈哈，其实我还搞不清楚方向来者，不过太极倒是画出来了，记录一下，方便日后查询 理论：绘制圆形cxt.arc(x,y,r,起点弧度（3点位置），终止弧度，bool(默认是false:顺时针，true:逆时针)) 下图是老师画的解析图，为了方便分析，我贴过来了，其实老师和我画的方法不一样，hhh，再次感叹一下 老师的用法：cxt.arc(600,600,100,Math.PI0.5，Math.PI1.5),是右边半圆。 成图： 代码如下：` //大圆部分 cxt
canvas制作动态太极图
H&B Blog
08-06 1412
用 canvas 画布绘制出一个会旋转的太极图 方法一： 运用css动画来实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态版太极图</title> <style> *{ margin: 0; ...
canvas绘制太极图的实现示例
01-21
看到了很多人写的太极图案，自己也来搞一下，今天就来.../* 给太极图设置旋转动画 */ @keyframes rotate{ 0%{ transform: none; } 100%{ transform: rotate(360deg); } } javascript代码 //文档加载完毕后执行
Android 绘制太极图实例详解
08-31
本文将详细介绍如何在Android中绘制太极图，通过一个具体的实例来展示实现过程。 首先，我们创建一个名为`TaijiCircleView`的自定义View类，继承自`View`。这个类的主要任务是绘制太极图。在类的构造函数中，我们...
html5--5-14 阶段小练习：绘制太极图案
weixin_34346099的博客
12-05 282
html5--5-14 阶段小练习：绘制太极图案   学习要点 运用前几节课的知识完成一个小练习 这个图案有多种不同的绘制方法，这里只做一个简单的演示，练习的时候可以自己思考一下，尝试其他的方法，或者对这个图案进行进一步的美化。 渐变色绘制方法 createLinearGradient() 创建线性渐变 createLinearGradient(x1,y1,x2,y2)-...
用html5画动态太极图
weixin_33720956的博客
05-11 331
<!DOCTYPEHTML><html><body><canvasid="myCanvas"width="500"height="500">yourbrowserdoesnotsupportthecanvastag</canvas><scripttype=...
HTML5利用canvas绘制太极图案
zhengzixiang666的博客
02-23 8544
代码如下：     pageEncoding="utf-8"%> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); //绘制左侧的白色半圆直径都是150 cxt.fillStyle="#FFFFFF"; cxt.beginPath(); cxt.arc(300,
利用canvas绘制太极图
weixin_44286392的博客
07-17 531
先看效果图 知识点 1.html的<canvas>标签: 该标签通过脚本（通常是JavaScript）来绘制图形，它只是图形容器，必须使用脚本绘制图形。 关于HTML画布的一些方法：https://www.runoob.com/tags/ref-canvas.html 2.HTML DOM getContext()方法： 在该案例中，var cxt=c.getContext("2d");参数"2d"指定了在画布上绘制的类型，即二维绘图。（当前唯一合法值是"2d"） 返回值cxt是一个Canva.
使用canvas画太极图
weixin_30596735的博客
07-29 160
定义和用法 arc() 方法创建弧/曲线（用于创建圆或部分圆）。 提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。 提示：请使用 stroke或 fill方法在画布上绘制实际的弧。 JavaScript 语法： context.arc(x,y,r,sAngle,eAngle,counterclockwise); 参...
用canvas画一个太极八卦图
qq_44748497的博客
12-08 535
首先是一个静态的八卦图： 这是状态图 主要代码如下： 左半圆 ctx.beginPath() ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5,true) ctx.fill() //右半圆 ctx.beginPath() ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5) ctx.fillStyle = 'white' ctx.fill() //.
用canvas画太极图（一步步详解附带源代码）
phpyasi520的博客
09-12 629
canvas绘图 该元素负责在页面中设定一个区域，然后由js动态地在这个区域中绘制图形。这个技术最早是由美国苹果公司推出的，目的是为了取代flash，很快主流浏览器都支持它。 绘制路径 要绘制路径首先必须调用beginPath()方法，如果想绘制一条连接到起点的线条则调用closePath()方法；如果路径已完成，你想用fillStyle填充它，可以调用fill()方法。另外还可以调用stroke()方法对路径描边，使用strokeStyle。 按照上图，就能画出圆，半圆，，...
JavaScript中canvas绘制太极图案
粥要熬。
05-05 1431
代码如下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> canvas{background: #A9A9A0} </style> </head> <body> <canva
canvas画太极
William.Yao的博客
11-16 404
最近看了一部电影《太极2：英雄崛起》恰巧里面有我最喜欢的bady再加上上大学时也学过太极拳。索性就用canvas画个太极吧，供大家乐呵乐呵~ <canvas width="600" height="400" id="myCanvas"></canvas><script> var c=document.getElementById('myCanvas'); var cxt= c.get
HTML5 Canvas阴影绘制与图形渲染详解
在HTML5中，Canvas是一个强大的图形绘制工具，允许开发者通过JavaScript在网页上绘制动态图形。Canvas元素本身只是一个容器，它的实际绘图工作需要通过JavaScript的Canvas API来完成。为了在Canvas上绘制图形并为其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值