文档章节

用canvas画太极图(一步步详解附带源代码)

o
 osc_8adtko4d
发布于 07/15 12:05
字数 936
阅读 29
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

canvas绘图

该元素负责在页面中设定一个区域,然后由js动态地在这个区域中绘制图形。这个技术最早是由美国苹果公司推出的,目的是为了取代flash,很快主流浏览器都支持它。

绘制路径

要绘制路径首先必须调用beginPath()方法,如果想绘制一条连接到起点的线条则调用closePath()方法;如果路径已完成,你想用fillStyle填充它,可以调用fill()方法。另外还可以调用stroke()方法对路径描边,使用strokeStyle。

接口 参数 功能
rect() x,y,width,height 从点x,y开始绘制一个矩形,宽和高分别由width和height指定,这个方法是绘制路径。而不是fillRect()和strokeRect()所绘制的独立形状
arc() x,y,radius,startAngle,endAngle,counterclockwise 六个参数 以x,y为圆心绘制一条弧线,半径为radius,起始和结束角度分别为startAngle和endAngle,最后一个参数表示角度是否按逆时针方向计算,值为false表示顺时针。
lineTo() x,y 从上一点开始绘制一条直线,到x,y为止
moveTo() x,y 将绘图游标移动到x,y,不画线。

画圆的起始点坐标
按照上图,就能画出圆,半圆,,四分之一圆等等。

开始画图

1.先给背景一个背景颜色,并设置一块画布。

<body style="background-color: steelblue;">
    <canvas width="1000" height="1000" id="cv"></canvas>
</body>

2.画出一个半圆,背景颜色设为黑色。

<script>
        var c = document.getElementById("cv")
        var cv = c.getContext('2d')
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
    </script>

3.画出另一个半圆,背景颜色设为白色。

<script>
        var c = document.getElementById("cv")
        var cv = c.getContext('2d')
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "white"
        cv.fill()
    </script>

4.画出一个小的白色半圆,盖在黑色上面。

 <script>
        var c = document.getElementById("cv")
        var cv = c.getContext('2d')
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 425, 75, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "white"
        cv.fill()
    </script>

5.画出一个小的黑色半圆,盖在白色大半圆上。

 <script>
        var c = document.getElementById("cv")
        var cv = c.getContext('2d')
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 425, 75, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 575, 75, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "black"
        cv.fill()
    </script>

在这里插入图片描述
现在,太极图的样子基本成型。
6.分别画一个黑色小圆和一个白色小圆。

<script>
        var c = document.getElementById("cv")
        var cv = c.getContext('2d')
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 425, 75, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 575, 75, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 425, 20, 0, 2 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 575, 20, 0, 2 * Math.PI, false)
        cv.fillStyle = "white"
        cv.fill()
    </script>

这样,太极图也就成型了。
在这里插入图片描述
太极图虽然是canvas里面一个非常简单的东西。但是,在绘制的过程中一点要注意圆的原点坐标,半径等细节部分的问题。希望大家学好canvas后,画出更加精妙绝伦的东西。

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太极图</title>
</head>

<body style="background-color: steelblue;">
    <canvas width="1000" height="1000" id="cv"></canvas>


    <script>
        var c = document.getElementById("cv")
        var cv = c.getContext('2d')
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 425, 75, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 575, 75, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 425, 20, 0, 2 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 575, 20, 0, 2 * Math.PI, false)
        cv.fillStyle = "white"
        cv.fill()
    </script>

</body>

</html>
o
粉丝 0
博文 82
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Flappy Bird(安卓版)逆向分析(一)

更改每过一关的增长分数 反编译的步骤就不介绍了,我们直接来看反编译得到的文件夹 方法1:在smali目录下,我们看到org/andengine/,可以知晓游戏是由andengine引擎开发的。打开/res/raw/at...

enimey
2014/03/04
6.2K
18
我的架构演化笔记 功能1: 基本的用户注册

“咚咚”,一阵急促的敲门声, 我从睡梦中惊醒,我靠,这才几点,谁这么早, 开门一看,原来我的小表弟放暑假了,来南京玩,顺便说跟我后面学习一个网站是怎么做出来的。 于是有了下面的一段...

强子哥哥
2014/05/31
976
3
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.3K
1
Javascript图元绘制库--ternlight

基于HTML CANVAS API的Javascript库,提供在HTML页面上绘制图元——如流程图的能力。 目前已支持简单的矩形图元和图元间的连线(直线、直角连线两种),拖拽图元等能力。 该javascript librar...

fancimage1
2013/02/07
6.3K
1
N简单CMS

N简单CMS能够让网站开发者更快速、灵活、简单的开发网站。 N简单CMS有以下特点: 更简单和自由的模板标签调用 专注于人性化的管理和操作 基于完全php5框架Kohana2.3.4开发 资源调用和消耗更低...

匿名
2013/02/26
3.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

Subversion存储库中“分支”,“标记”和“主干”的含义是什么?

问题: I've seen these words a lot around Subversion (and I guess general repository) discussions. 我已经在Subversion(我猜通用存储库)讨论中看到了很多这样的话。 I have been us......

富含淀粉
今天
5
0
《Java8实战》笔记(03):Lambda表达式

本文源码 Lambda 管中窥豹 可以把Lambda表达式理解为简洁地表示可传递的匿名函数的一种方式:它没有名称,但它有参数列表、函数主体、返回类型,可能还有一个可以抛出的异常列表。 Lambda表达...

巨輪
今天
7
0
从其他文件夹导入文件 - Importing files from different folder

问题: I have the following folder structure. 我有以下文件夹结构。 application/app/folder/file.py and I want to import some functions from file.py in another Python file which r......

javail
今天
22
0
大数据研发学习之路--Hadoop集群搭建

阅读编译文档 准备一个hadoop源码包,我选择的hadoop版本是:hadoop-2.7.7-src.tar.gz,在hadoop-2.7.7的源码 包的根目录下有一个文档叫做BUILDING.txt,这其中说明了编译hadoop所需要的一些...

DSJ-shitou
今天
8
0
OSChina 周五乱弹 —— 特么是别的公司派来的特洛伊木马吧?

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 小小编辑推荐:《我会守在这里》- 毛不易 《我会守在这里》- 毛不易 手机党少年们想听歌,请使劲儿戳(这里) @FalconChen :股市连跪了五天,...

小小编辑
今天
77
2

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部