<!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. 【CF1243D&CF920E】0-1 MST（bfs，set）

    题意:给定一张n个点的完全图,其中有m条边权为1其余为0,求最小生成树的权值和 n,m<=1e5 思路:答案即为边权为0的边连接的联通块个数-1 用set存图和一个未被选取的点的集合,bfs过程 ...

  2. TCP大文件上传与UDP协议

    一.UCP大文件上传(解决粘包问题) ①客户端 import socket, os, json, struct client = socket.socket() client.connect(('12 ...

  3. create-react-app 构建的项目使用释放配置文件 webpack 等等 运行 npm run eject 报错

    使用 git 提交一次记录即可正常 git add . git commit -m 'init' npm run eject

  4. Android图片缩放 指定尺寸

    //使用Bitmap加Matrix来缩放     public static Drawable resizeImage(Bitmap bitmap, int w, int h)     {       ...

  5. Bootstrap Table 的X-editable插件怎么用

    在准备使用X-editable来做Bootstrap Table 的行内编辑的时候,根据http://www.cnblogs.com/landea... 的文章,我不能将全部效果重复实现,网上也搜索了 ...

  6. tensorflow源码分析——LSTMCell

    LSTMCell 是最简单的LSTMCell,源码位于:/tensorflow/contrib/rnn/python/ops/core_rnn_cell_impl.py.LSTMCell 继承了RNN ...

  7. 【ASK】设置网卡启动遇到的事！

    上次动笔是16年的事情了,一晃3年过去了.算了,不感慨了.直奔主题吧. 1.今天朋友要把一批win10的机器设置成网卡启动. 2.网卡是intel集成的. 3.按照主板说明已经设置成功. 4.通过wi ...

  8. Vue知识整理15：组件注册

    采用局部注册组件: 将代码放在vue的一个实例中,而不是单列申明.

  9. Object.freeze与 Object.seal的区别

    Object.freeze()冻结一个对象.不能添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性.可配置性.可写性,以及不能修改已有属性的值.冻结一个对象后该对象的原型也不能被修改. ...

  10. 【工具安装】VMware 安装教程

    介绍:介绍一下 VMware 的安装. 0x01. 下载软件 打开官网 VMware Workstation Pro 点击立即下载即可.  也可以直接使用迅雷,添加下载任务,比浏览器下载速度快些,提 ...