<!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. jmeter解决登录token获取

    1.以百度登录为例 2.打开console 3.根据console结果设置公共的header在test plan 4.建立测试计划-test plan 5.正则表达式提取器,获取token 6.登录t ...

  2. 安全测试7_Web安全在线工具

    1.搜索引擎语法简单讲解:(实际上就是搜索引擎的高级搜索) 类似百度:可以看到下图我们是想在指定站点搜索包含login的页面,搜索语法为site:(testphp.vulnweb.com) " ...

  3. vim more

      启用鼠标 :set mouse=a 跳转到下一函数 下一个函数开头 ]] 当前函数末尾/下一个函数的末尾 ][ 当前函数开头/上一个函数的开头 [[ 选项可以按任何顺序生效,可以放在文件名前或后边 ...

  4. swing 下拉菜单

    package rom; import java.lang.*; import javax.swing.BorderFactory; import javax.swing.ButtonGroup; i ...

  5. elasticssearch+kibanna入门（撰写中）

    看到一篇elasticssearch+kibanna的文章,觉得很好,不过例子是python的,所以使用java自己安装一下: https://mp.weixin.qq.com/s?__biz=MjM ...

  6. iPhone投影

    iPhone投影到Mac上面的操作,用QuickTime,选择主菜单的新建屏幕录制,然后点击录制按钮右边的箭头,相机切换到iPhone就可以了. 相关操作参照 https://jingyan.baid ...

  7. anchor values list

  8. vue的初识与简单使用---前后端分离通过接口调取数据

    vue的安装 #### .环境搭建 ''' - 安装node ``` 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ ``` - 安装cnpm ``` npm inst ...

  9. Navicat Premium 12安装与激活

    https://www.jianshu.com/p/42a33b0dda9c 若使用Navicat Premium 12.1.10.0请转至Navicat Premium 12.1.10.0安装与激活 ...

  10. UIPanGestureRecognizer translateInView, locationInView

    假设在panGesture的回调事件里已经拿到了panGestureRecognizer CGPoint point = [panGestureRecognizer locationInView:se ...