<!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. Spring 配置 Annotation <context:annotation-config> 和 <context:component-scan>标签的诠释及区别

    Spring 开启Annotation <context:annotation-config> 和 <context:component-scan>诠释及区别 <cont ...

  2. mybatis基于注解形式的多数据源

    最近在做一个系统管理项目,需要使用到多数据源,尝试了注解形式和xml形式的多数据源配置,以下是基于注解形式的Mybatis多数据源配置. 1.application.yml 配置文件 database ...

  3. 500 Internal Privoxy Error

    打开网站突然发现网站无法打开了,一脸懵逼,服务器重启也不行,明明能ping通,网上查的答案千奇百怪的 500 Internal Privoxy Error Privoxy encountered an ...

  4. 利用Python实现FGO自动战斗脚本，再也不用爆肝啦~

    Fate/Grand Order(非的肝不过欧的)作为索尼为了拯救自己不倒闭而开发的面向月厨的骗氪养成抽卡爆肝游戏,居然没有像隔壁<阴阳师>的自动战斗系统(看看别人现在都自带脚本了).毕竟 ...

  5. Unity3D的断点调试功能

    断点调试功能可谓是程序员必备的功能了.Unity3D支持编写js和c#脚本,但很多人可能不知道,其实Unity3D也能对程序进行断点调 试的.不过这个断点调试功能只限于使用Unity3D自带的Mono ...

  6. Notes on Noise Contrastive Estimation and Negative Sampling

    Notes on Noise Contrastive Estimation and Negative Sampling ## 生成负样本 在常见的关系抽取应用中,我们经常需要生成负样本来训练一个好的系 ...

  7. 23.纯 CSS 创作一个菜单反色填充特效

    原文地址:https://segmentfault.com/a/1190000014876348 HTML代码: <nav> <ul> <li><span&g ...

  8. ucenter

    1 UCenter 的目录结构 2API接口 3返回标签数据示例 (PHP) 4应用接口函数 5短消息接口函数 6积分接口函数 7邮件接口函数 8事件接口函数 9头像接口函数 10好友接口函数 11用 ...

  9. Word，excel开发指南

    New Document dfsdfds &dsfds &sdf; dsf dsf dsfds fsdfdsfdsf dsfs dsfds dsf dsfd sfds   sdf fd ...

  10. virtual安装linux

    virtual直接在官网上下载即可. 下载iso的镜像文件.新建 ->设置创建 redhat 根据镜像文件选择需要创建的版本. 创建后运行,如果出现一直黑屏,需要查看电脑支持虚拟是否启动. 右C ...