JavaScript中canvas绘制太极图案
代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">canvas{background: #A9A9A0}</style>
</head>
<body><canvas id="mycanvas" width="800" height="600"></canvas><!-- 创建canvas元素设置画布的宽和高 --><script type="text/javascript">var canvas = document.getElementById("mycanvas"); //获取canvas元素var context = canvas.getContext('2d');//获取上下文的环境g1 = context.createLinearGradient(400,100,400,500);//创建线性的渐变对象,参数分别为渐变开始点的x、y坐标,渐变结束点的x、y坐标。g1.addColorStop(0,"black");//addColorStop指定各个位置的颜色g1.addColorStop(1,"white");g2 = context.createLinearGradient(400,100,400,500);g2.addColorStop(0,"white");g2.addColorStop(1,"black");g3 = context.createRadialGradient(400,200,1,400,200,10);//创建放射状/圆形渐变对象,参数分别为渐变开始圆的x、y坐标,开始圆的半径,渐变结束圆的x、y坐标,结束圆的半径。g3.addColorStop(0,"white");g3.addColorStop(1,"black");g4 = context.createRadialGradient(400,400,1,400,400,10);g4.addColorStop(0,"black");g4.addColorStop(1,"white");context.arc(400,300,200,1/2*Math.PI,3/2*Math.PI);//arc方法创建圆弧、曲线,参数分别为圆中心的x坐标、圆中心的y坐标、圆的半径、起始角、结束角context.arc(400,200,100,1/2*Math.PI,3/2*Math.PI,true);//counterclockwise(可选)False = 顺时针,true = 逆时针。context.arc(400,400,100,0.5*Math.PI,1.5*Math.PI);context.fillStyle=g1;//设置或返回用于填充绘画的颜色、渐变或模式。context.fill();context.beginPath();//在一个画布中开始子路径的一个新的集合。context.arc(400,300,200,1/2*Math.PI,3/2*Math.PI,true);context.arc(400,200,100,1.5*Math.PI,0.5*Math.PI);context.arc(400,400,100,3/2*Math.PI,1/2*Math.PI,true);context.fillStyle=g2;context.fill();context.beginPath();context.arc(400,200,10,0,Math.PI*2);context.fillStyle = g3;context.fill();context.beginPath();context.arc(400,400,10,0,Math.PI*2);context.fillStyle = g4;context.fill();</script>
</body>
</html>
效果图是这样的
JavaScript中canvas绘制太极图案相关推荐
- 如何在html5中实现多圆,JavaScript与html5如何实现canvas绘制圆形图案的方法介绍
这篇文章主要介绍了js+html5实现canvas绘制圆形图案的方法,涉及html5图形绘制的基础技巧,需要的朋友可以参考下 本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大 ...
- js html 卡通 学生,JavaScript+html5 canvas绘制的小人效果
本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: canvas中的缩放 #canvas ...
- html小人动画效果代码,JavaScript+html5 canvas绘制的小人效果
本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: canvas中的缩放 #canvas ...
- html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
- html5canvas绘制时钟,JavaScript html5 canvas绘制时钟效果
本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: canvas绘图 JavaScript部分: function init() ...
- html弧形列表效果,JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { margin:50 ...
- HTML5 Canvas组件绘制太极图案
一实现思路: 实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆,首先绘 制两个半圆,分别为黑色和白色,组成一个圆,绘制完成以后再分别绘制一个黑色 和白色的圆在绘制好的黑白圆 ...
- canvas——绘制解锁图案
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>手机解 ...
- html 圆圈透明 其他不透明,Javascript HTML5 Canvas绘制透明圆圈
我需要有一个函数在画布上绘制几个圆圈,从mousedown at center = x,y开始,并将鼠标拖动到deltaX,deltaY,从而为每个圆圈创建半径r.圆圈无法填充(需要它们透明),因此用 ...
- 【JavaScript】Canvas绘制美丽的网螺旋旋转图形
<!DOCTYPE html> <html> <head><meta http-equiv = "content-type" conten ...
最新文章
- Hadoop运行模式 之 本地运行模式
- 郑州网络推广教你如何“悄悄”做网站SEO,惊艳竞争对手?
- bupt summer training for 16 #2 ——计算几何
- 字符在utf-8,gbk,gb2312,iso8859-1下的编码实验
- .NET平台相关概念(简单了解)
- 19.Silverlight调用webservice上传多个文件
- bootstrap 开源框架demo_5 个接私活必备的 Java 开源项目!
- linux(虚拟机中)与windows共享文件两种方法
- 深入掌握Linux操作系统,其实也没你想象那么难
- 费尔马小定理素数java_利用费马小定理判断素数
- android开机自动开启zram,低内存配置 | Android 开源项目 | Android Open Source Project...
- 安装nginx并搭建nginx图片服务器
- 函数式编程(Functional Programming)
- 错误: 15138删除对于用户失败,数据库主体在该数据库中拥有架构,无法删除。解决方法(转)
- mysql dns反说明的成绩
- Win10系统下CUDA10.0的安装
- 从鸭子游戏设计看设计模式
- 第十七节:通信之WLAN(WPA3-Ⅰ)
- 蓝牙耳机哪种通话效果最好?通话质量最好的蓝牙耳机盘点
- XSuperNEST套料引擎
热门文章
- 一个伪作家谈如何让孩子爱上写作文
- RabbitMQ 整合SpringBoot
- win10桌面管理文件收纳_win10系统关闭桌面文件收纳盒的详细方法介绍
- 人工智能终究会抢了我们程序员的饭碗
- 广东工业大学计算机学院张静,广东工业大学文件.doc
- 如何提高淘宝新店店铺关注量方法技巧
- python植物大战僵尸辅助_Python自学入门,如何制作植物大战僵尸
- CE实现植物大战僵尸后台运行
- 网页提示“证书错误:导航已阻止”,无法跳转解决办法
- 计算机功能键盘使用方法,键盘的使用方法介绍 键盘上都有哪些功能按键