canvas画布——画八卦图

实例

创建一个圆形：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(100,75,50,0,2*Math.PI);

ctx.stroke();

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。

注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。

定义和用法

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始角：arc(100,75,50,0,1.5*Math.PI)
结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)

JavaScript 语法：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数值

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

为大家介绍曲线的语法。如果要创建一个圆形，我们可以使用arc()方法。

　　语法：arc(定义一个中心点，半径，起始角度，结束角度，和绘图方向：顺时针或逆时针)

　　代码：context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);

　　HTML5 Canvas Arc 说明：

八卦图示例代码：

　　程序效果如下：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<title>无标题文档</title>

<!--下面excanvas.js需下载才能在IE下支持canvas-->

<!--[if IE]>

<script src="http://a.tbcdn.cn/p/fp/2011a/html5.js"></script>

<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>

<script src="excanvas.js"></script>

<![endif]-->

<script type="text/javascript">

window.onload = function(){

 var ctx = document.getElementByIdx_x_x_x("pic").getContext('2d');

 //绘制白色半圆的代码如下：

 ctx.beginPath();

 ctx.arc(200,200,80,1.5*Math.PI,Math.PI/2,false);

 ctx.fillStyle="white";

 ctx.closePath();

 ctx.fill();

 //绘制黑色半圆的代码如下：

 ctx.beginPath();

 ctx.arc(200,200,80,Math.PI/2,1.5*Math.PI,false);

 ctx.fillStyle="black";

 ctx.closePath();

 ctx.fill();

 //绘制黑色小圆

 ctx.beginPath();

 ctx.arc(200,240,40,0,Math.PI*2,true);

 ctx.fillStyle="black";

 ctx.closePath();

 ctx.fill();

 //绘制白色小圆

 ctx.beginPath();

 ctx.arc(200,160,40,0,Math.PI*2,true);

 ctx.fillStyle="white";

 ctx.closePath();

 ctx.fill();

 //绘制白色小圆心

 ctx.beginPath();

 ctx.arc(200,160,5,0,Math.PI*2,true);

 ctx.fillStyle="black";

 ctx.closePath();

 ctx.fill();

  //绘制黑色小圆心

 ctx.beginPath();

 ctx.arc(200,240,5,0,Math.PI*2,true);

 ctx.fillStyle="white";

 ctx.closePath();

 ctx.fill();

 //绘制文字代码如下：

 ctx.save();

 ctx.fillStyle="black";

 ctx.globalAlpha="0.4";

 ctx.textAlign="center";

 ctx.font="32px Arial";

 ctx.shadowColor="rgba(0,0,0,0.4)";

 ctx.shadowOffsetX=15;

 ctx.shadowOffsetY=-10;

 ctx.shadowBlur=2;

 ctx.fillText('Hello Canavs',200,100);//IE不支持

 ctx.restore();

}

</script>

</head>

<body>

<canvas id="pic" width="400" height="400" style="border:1px solid; background:#E1E1FF;"></canvas>

</body>

</html>

canvas画布——画八卦图的更多相关文章

用canvas画布画一个画板
前段时间,在对H5的回顾中突然对canvas有了感觉,闲来无事便对其进行了一些捯饬.这不,上周我还做了一个好玩的画板呢,废话不多说,直接上代码(PS:翠花,上代码~): HTML部分: <!DO ...
[html5] canvas 绘图：八卦图
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title&g ...
[技术博客]海报图片生成——小程序canvas画布
目录背景介绍 canvas简介代码实现难点讲解圆角矩形裁剪失败之PS的妙用编码不要过硬对过长的文字进行截取真机首次生成时字体不对 drawImage只能使用本地图片背景介绍目标:利用 ...
“canvas画布仿window系统自带画图软件"项目的思考
"canvas画布仿window系统自带画图软件"项目的思考首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一在做项目的过程中,我发现"工具 ...
konva canvas插件写雷达图示例
最近,做了一个HTML5的项目,里面涉及到了雷达图效果,这里,我将react实战项目中,用到的雷达图单拎出来写一篇博客,供大家学习. 以下内容涉及的代码在我的gitlab仓库中:Konva canva ...
canvas上画出坐标集合，并标记新坐标，背景支持放大缩小拖动功能
写在前面:项目需求,用户上传一个区位的平面图片,用户可以在图片上添加新的相机位置,并且展示之前已绑定的相机坐标位置,图片支持放大缩小&拖动的功能.新增坐标,页面展示相对canvas定位,保存时 ...
使用canvas 代码画小猪佩奇
最近不是小猪佩奇很火嘛!!! 前几天在知乎看见了别人大佬用python写的小猪佩奇, 顿时想学 ,可是自己没学过python(自己就好爬爬图片,,,,几个月没用又丢了) 然后就想画一个 ...
canvas画布基本知识点总结
HTML5的canvas元素使用JavaScript画图: <canvas width="600" height="400"> </canva ...
Matplotlib——第一章轻松画个图
首先安装matplotlib,使用pip install matplotlib.安装完成后在python的命令行敲入import matplotlib,如果没问题,说明安装成功可以开始画图了. 看好了 ...

随机推荐

HTML表格相关元素
<table> 标签定义 HTML 表格.简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成.tr 元素定义表格行,th 元素定义表头,td 元素定义 ...
小程序 - 图片列表显示lazyload效果
在做一个短视频平台,涉及到的都是一些列表模块.因为小程序没有提供lazyload api,所以只能自己写一个了... 开发涉及 <scroll-view></scroll-view& ...
vue授权页面登陆之后返回之前的页面
import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)import home from "@/pages/ho ...
创建简单的node服务器
昨天咱们说了封装ajax,今天咱们说一下自己创建一个建议的node服务器: 话不多说直接上代码: var http = require('http') //对URL 解析为对象//1.导入模块 UR ...
巡风扫描器安装-windows部署
巡风是一款适用于企业内网的漏洞快速应急,巡航扫描系统. 作者github地址 https://github.com/ysrc/xunfeng 一.环境安装 1,安装Python解释器 https:// ...
linux注册服务教程
该说明是项目完成很久之后,整理资料时的偶然发现,当时所操作的linux为中标麒麟,需要对项目进行开机自启,对llinux还不熟悉,找不到linux中的服务自启设置.辗转多次才找到了解决方案.记录以供参 ...
geth访问公有链
同步以太坊,配置rpc地址 mkdir /opt/blockchain nohup geth --syncmode "fast" --cache=1024 --maxpeers 3 ...
Winform中 DataGridView控件中的 CheckBox 的值读出来始终为 False ,已解决
private void DGV_DetailsViewer_CellContentClick(object sender, DataGridViewCellEventArgs e) { )) { D ...
ZooKeeper 典型应用场景-Master选举
master选举 1.使用场景及结构现在很多时候我们的服务需要7*24小时工作,假如一台机器挂了,我们希望能有其它机器顶替它继续工作.此类问题现在多采用master-salve模式,也就是常说的主从 ...
Gym 101308I Inspection
题意: 用最少的路径,覆盖掉所有的边,(点可以重复): 不是用最小路径覆盖,最小路径覆盖是覆盖点: 分析: 建图:入度<出度,说明这是个起点,从这里出发,入度>出度,说明从这里结束: 先找 ...