<!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. MySQL_DML操作

    DML(Data Manipulation Laguage)指对数据库数据的增(Create)删(Delete)改(Update)操作 1.增加操作 (1)先创建一个表,如图所示: 语法:Insert ...

  2. 3D Computer Grapihcs Using OpenGL - 18 相机移动

    移动相机需要用到键盘按键,按键事件的引入需要包含头文件 #include <Qt3DInput\qkeyevent.h> 并实现QWidget中定义的虚函数keyPressEvent 我们 ...

  3. android 对话框显示工具类

    这个工具类非常简单,但是将显示dialog的方法统一封装,能够大大减少代码重复 package com.ctbri.weather.utils; import android.app.AlertDia ...

  4. 洛谷P4095新背包问题

    传送 这道题最最暴力的方法就是对于每一个询问都跑一边多重背包问题,但显然q不会那么友好的让我们用暴力过掉这道题. 考虑优化.我们可以先把裸的多重背包搞成二进制优化后的多重背包.但是复杂度依然无法接受. ...

  5. 一、Python环境的搭建

    1.python官方下载地址:https://www.python.org/:python现在有两个版本:python2.7.x和python3.x 2.安装:一路下一步,默认安装 3.配置环境变量: ...

  6. 开发-日常工具：TFS（Team Foundation Server）

    ylbtech-开发-日常工具:TFS(Team Foundation Server) TFS(Team Foundation Server)是一个高可扩展.高可用.高性能.面向互联网服务的分布式文件 ...

  7. preventDefault 和 stopPropagation

    概述 以前开发项目的时候,总是分不清楚 preventDefault 和 stopPropagation,每次都是用 @click.stop试一下,不能就用@click.prevent试一下.今天来好 ...

  8. Linux_Rsync远程同步备份服务器

    目录 目录 Remote Sync 同步的类型 本地模式 远程模式 RSync列表模式 RSync 服务模式 Setup RSync service How to use the rsync comm ...

  9. 阶段3 1.Mybatis_06.使用Mybatis完成DAO层的开发_2 Mybatis中编写dao实现类的使用-保存操作

    再完善.saveUser的方法 测试保存的操作 报错了 SqlSession的insert的源码 我们在执行Insert的时候,并没有把user对象传过去 usersex改成sex 再次测试

  10. sql语句实现行转列的3种方法实例

    sql语句实现行转列的3种方法实例 一般在做数据统计的时候会用到行转列,假如要统计学生的成绩,数据库里查询出来的会是这样的,但这并不能达到想要的效果,所以要在查询的时候做一下处理,下面话不多说了,来一 ...