<!DOCTYPE html>
<html>
<head>
   <title>canvas example</title>
    <meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="600px" height="600px"></canvas>

<script>
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext('2d');
    context.beginPath();
    context.arc(300,300,200,0,2*Math.PI,false);
    context.stroke();
    context.beginPath();
    context.fillStyle="black";
    context.arc(300,300,200,Math.PI/2,Math.PI*3/2,false);
    context.fill();
    context.beginPath();
    context.fillStyle="white";
    context.arc(300,200,100,0,Math.PI*2,false);
    context.fill();
    context.beginPath();
    context.fillStyle="black";
    context.arc(300,400,100,0,Math.PI*2,false);
    context.fill();
    context.beginPath();
    context.fillStyle="black";
    context.arc(300,200,30,0,Math.PI*2,false);
    context.fill();
    context.beginPath();
    context.fillStyle="white";
    context.arc(300,400,30,0,Math.PI*2,false);
    context.fill();
</script>
</body>
</html>

效果图如下：

canvas元素绘制太极图的更多相关文章

  1. canvas元素

    一.canvas元素的基础知识 canvas元素是html5中新增的一个重要的元素,专门用来绘制图形.在页面上放置了一个canvas元素,就相当于在页面上放置了一块"画布",可以在 ...

  2. 使用canvas元素-art方法绘制圆弧

    最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作.我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识. 首先看 ...

  3. -_-#【Canvas】导出在<canvas>元素上绘制的图像

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. HTML5图形绘制学习（1）-- Canvas 元素简介

    Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素.和其名称Canvas一样,它就相当于一个画布,我们可以在其上描绘各种图形. 这里所说的绘制图型,不是指我们可以进行可视化的图形绘制, ...

  5. HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  6. canvas一周一练 -- canvas绘制太极图（6）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  7. 【高级功能】使用canvas元素（第一部分）

    1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...

  8. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  9. 【温故而知新-Javascript】使用canvas元素（第二部分）

    本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...

随机推荐

  1. JVM总结-虚拟机怎么执行字节码

    1. JRE,JDK JRE : 包含运行 Java 程序的必需组件,Java 虚拟机+ Java 核心类库等. JDK :  JRE + 一系列开发.诊断工具. 2. java字节码 编译器将 Ja ...

  2. LInux下的jdk环境置

    1.Linux下使用wget下载jdk8: 进入目录/usr/local/software 2.解压 tar -zxvf  jdk-8u152-linux-x64.tar.gz 3.配置环境变量 vi ...

  3. 从入门到熟悉 HTTPS 的 9 个问题

    九个问题从入门到熟悉HTTPS 最近一边做毕设一边学习编程.前两天她问我 HTTPS 的问题,本来想直接扔一篇网上的教程给她.后来想了一下,那些文章大多直接介绍概念, 对新手不太友好,于是我干脆亲自给 ...

  4. EditText被键盘遮得住

    如果在Activity中的布局的下方有EditText,获取焦点弹出软键盘的时候,如果不做处理,软键盘可能会遮挡输入框,用户提现不好,网上也有很多人提出结局方案,这里就分析一下解决的效果. 需要用到E ...

  5. 关于 Thread.currentThread()

    currentThread()  到底是什么? 其实currentThread() 只是Thread 的一个静态方法.返回的正是执行当前代码指令的线程引用: /** * Returns a refer ...

  6. UML图基础知识

    一.UML简述 类是面向对象系统中最重要的构造块.类图显示了一组类.接口.协作以及他们之间的关系,通过类图,我们能够很好的掌握类与类之间的关系. 首先给出一幅UML类图,此图来源于<大话设计模式 ...

  7. jsp取addFlashAttribute值深入理解即springMVC发redirect传隐藏参数

    结论:两种方式 a.如果没有进行action转发,在页面中el需要${sessionScope['org.springframework.web.servlet.support.SessionFlas ...

  8. MVC登录校验

    利用MVC自带的过滤器可现实简单的登录校验 在项目目录下创建一个BaseController控制器,让需要验证的控制器继承这个BaseController 需要让BaseController继承Con ...

  9. 线程池构造类 ThreadPoolExecutor 的 5 个参数

    1.corePoolSize :核心线程数 2.maxPoolSize: 最大线程数 3.keepAliveTime :闲置线程存活时间 4.unit:参数keepAliveTime的时间单位,有7种 ...

  10. day35-常见内置模块四(logging模块)

    一.函数式简单配置(低配) 1.只能在屏幕上显示,或者写入文件,不能同时进行 import logging logging.debug('调试') logging.info('正常运行') loggi ...