canvas太极八卦图

我们在画太极图时，首先得知道思路是怎样的

1、先画一个大圆；

2、大圆两边分别是颜色黑、白的半圆；

3、然后再是两个小圆组成的弧形；

4、再是更小的圆组成的小圆点。

好的，理清了思路，我们就开始写了

获取canvas元素

var myCanvas = document.getElementById('myCanvas');

创建画布对象

var context = myCanvas.getContext('2d');

canvas元素本身是不具备绘图能力的，我们要通过getContext（）方法来得到画布对象

接下来就是绘图过程了

1、画大圆

context.beginPath();context.strokeStyle = '#000';context.arc(200,200,100,0,Math.PI*2);context.closePath();context.stroke();

2、左边半圆填充，使得两边颜色不同

context.beginPath();context.arc(200,200,100,Math.PI/2,Math.PI*3/2);context.closePath();context.fill();

3、小圆

3.1上边的小圆

context.beginPath();context.arc(200,150,50,0,Math.PI*2);context.closePath();context.fill();

3.2下边的小圆

context.beginPath();context.fillStyle = "#fff";context.arc(200,250,50,0,Math.PI*2);context.closePath();context.fill();

4、八卦图最小的圆

4.1上边的最小圆

context.beginPath();context.fillStyle = "#fff";context.arc(200,150,20,0,Math.PI*2);context.closePath();context.fill();

4.2下边的最小圆

context.beginPath();context.fillStyle = "#000";context.arc(200,250,20,0,Math.PI*2);context.closePath();context.fill();

最终显示为：

冲冲冲！！！

canvas太极八卦图相关推荐

HTML5新增元素之Canvas-实现太极八卦图和扇子
HTML5新增元素之Canvas-实现太极八卦图和扇子绘制流程: 1.在HTML5中添加canvas元素,并且设置宽度和ID 2.在canvas元素中添加提示语句,让不支持的canvas的浏览器能够 ...
HTML绘制太极八卦图
实现效果如下: 实现代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
python画太极八卦图_AI剪刀工具快速绘制太极八卦图
这篇教程主要是向大家介绍AI剪刀工具快速绘制太极八卦图方法,教程很简单,大家一起来学习吧! 具体的制作步骤如下: 1.Ctrl+N新建一个300*300mm的文档. 2.使用矩形工具,绘制一个与文档大 ...
python画太极八卦图_太极八卦图的正确画法
PPT怎么画太极八卦图?之前我们介绍了好几种软件绘制太极八卦图的方法,今天我们来看看最常见的ppt中怎么画太极八卦图?下面分享详细的绘制过程和具体参数,需要的朋友可以参考下 1.新建一个PPT文档,设 ...
用python画八卦图-使用turtle绘制太极八卦图
话不多说,直接看效果太极八卦图.png 下面是源码 # coding: utf-8 import turtle as t colors = ['white', 'black'] # 设置画笔宽度 t ...
python画太极八卦图_用布尔运算绘制一个太极八卦图
布尔运算是UI设计中一个关键的知识点,今天,我们继续给不熟悉的朋友补补课. 教程来自P大点S的PJ胸,Pro_java,在这里,我们会用一个八卦图,再次带大家熟悉布尔运算,特别适合新手练习! 新建一个 ...
canvas 绘制八卦图
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
动态八卦图html,HTML绘制太极八卦图
实现效果如下: 实现代码如下: 太极八卦图 div{ text-align: center; margin-top: 30px; } #mytj{ background-color: skyblue; ...
html5制作八卦图,使用HTML+CSS画太极八卦图
使用HTML+CSS画太极八卦图基本语法 CSS基本语法格式: 选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......} 选择符: 1.元素选择器:找到同名一系列 2.类选择器: ...

canvas太极八卦图

canvas太极八卦图相关推荐

最新文章

热门文章