<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>太极图</title>

</head>

<body>

    <canvas id="myCanvas" width="1300px" height="600px" style="background:gray">

        你的浏览器不支持canvas

    </canvas>

    <script type="text/javascript">

        var canvas=document.getElementById('myCanvas');

        var context=canvas.getContext('2d');

        // 太极图

        context.lineWidth=5;

        context.fillStyle="black";

        context.arc(400,300,200,Math.PI/2,Math.PI/2*3,false);

        context.fill();

        context.beginPath();

        context.fillStyle="white";

        context.arc(400,300,200,Math.PI/2*3,Math.PI/2,false);

        context.fill();

        context.beginPath();

        context.fillStyle="black";

        context.arc(400,200,100,Math.PI/2*3,Math.PI/2,false);

        context.fill();

        context.beginPath();

        context.fillStyle="white";

        context.arc(400,400,100,Math.PI/2,Math.PI/2*3,false);

        context.fill();

        // 两个小圆心

        context.beginPath();

        context.fillStyle="white";

        context.arc(400,200,10,0,Math.PI*2,false);

        context.fill();

        context.beginPath();

        context.fillStyle="black";

        context.arc(400,400,10,0,Math.PI*2,false);

        context.fill();

    </script>

</body>

</html>

1.利用canvas画一个太极图的更多相关文章

  1. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  2. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  3. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

  4. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  5. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  6. 用canvas画一个的小画板（PC端移动端都能用）

    前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...

  7. Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) .

    1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...

  8. Android利用canvas画各种图形 及Paint用法 .

    引自:http://blog.csdn.net/carlfan/article/details/8139984 1.首先说一下canvas类: Class Overview The Canvas cl ...

  9. 使用H5 canvas画一个坦克

      具体步骤如下:   1. 首先做出绘图区,作为坦克的战场   <canvas id="floor" width="800px" height=&quo ...

随机推荐

  1. 详细讲解Android中的Message的源码

    相信大家对于Android中的Handler是在为熟悉不过了,但是要知道,Handler就其本身而言只是一个壳子,真正在内部起到作用的是Message这个类,对于Message这个类,相信大家也不会陌 ...

  2. WebClient上传下载文件，小白篇

    WebClient的上传文件一直报错,各种百度各种稀奇古怪的东西,终于百度到一篇小白学习篇 转自: https://www.cnblogs.com/cncc/p/5722231.html 使用C#We ...

  3. FP AUTO节点ZPP002M执行卡住解决

    正常情况下,不到一分钟即可执行完ZPP002M节点 异常情况下,超过十分钟都没有响应 再等待只会影响FP的执行时间,影响后续的节点,解决办法是将正在执行的JOB STOP掉 再到服务器上将该节点重新执 ...

  4. 测试常用linux命令之系统监测

    top命令: cpu使用情况,内存等 du -hs: 查看目录大小 df -h :查看磁盘使用情况 free: 查看电脑整体内存使用情况 uptime:系统时间,用户数目等 vmstat:内存使用,进 ...

  5. windows7 中 wacom数位板如何关闭点击水波 和长按右键这两个特效

    就是点住笔尖不动,就会弹出右键,这个功能是微软操作系统具有的一项功能,,如果您感觉不便,可以按以下方法将其去掉: 1.打开"控制面板--笔和触摸--笔选项--按下并保持--设置": ...

  6. vsCode格式化插件

    ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 背景 近来研究前端,然后一直在百度上找VScode格式化(ESlint)的插件,结果找了半天都不靠谱.目前没有一 ...

  7. Laravel提交POST请求报错

    提交POST请求出现如下错误: The page has expired due to inactivity Please refresh and try again 这是由于在Laravel框架中有 ...

  8. 安装 Windows 系统在 NVMe 规范的 M.2 接口的固态硬盘（SSD）上

    作为一个程序员很重要的一项技能就是装系统 @_@,以前我都是随便用网上的工具做个系统盘,每次要用直接随手就搞好了,节省大家时间. 但最近同事装了个贼小的固态,然后我启动盘里的系统果断识别不出来他的固态 ...

  9. xshell6，xftp下载

    https://www.netsarang.com/zh/free-for-home-school/

  10. 【Html5】表单全选、全不选

    以下为页面效果图   用HBuilder做  谷歌浏览器 index.html代码 <!DOCTYPE html> <html> <head> <meta c ...