[html5] canvas 绘图：八卦图
<!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.getElementById("pic").getContext('2d'); //绘制白色半圆的代码如下：
ctx.beginPath();
ctx.arc(200,200,80,1.5*Math.PI,0.5*Math.PI,false);
ctx.fillStyle="white";
ctx.closePath();
ctx.fill(); //绘制黑色半圆的代码如下：
ctx.beginPath();
ctx.arc(200,200,80,0.5*Math.PI,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;margin:0px auto;display:block;"></canvas> </body> </html>
效果：
[html5] canvas 绘图：八卦图的更多相关文章
- HTML5 Canvas绘图如何使用
--------------复制而来--原地址http://jingyan.baidu.com/article/ed15cb1b2e642a1be369813e.html HTML5 Canvas绘图 ...
- HTML5 canvas绘图基本使用方法
<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingCon ...
- HTML5 canvas绘图
HTML5 canvas画图 示例 ------- <!DOCTYPE html> <head> <meta charset="UTF-8"> ...
- HTML5 Canvas绘图详解 drawImage() 方法 有图有真相！
步骤 1 2 3 4 5 简介 是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做简单的(和不那么简单的)动画. ...
- HTML5 Canvas绘图系列之一：圆弧等基础图形的实现
之前的一个微信项目已经要结项了,最近整理一下项目中使用较多的canvas画图方面的知识吧,打算写个3,4篇的样子.本篇主要介绍基础操作和弧线画法. 之后再写一下趋势图,直方图,文本图像处理的. 言归正 ...
- HTML5 Canvas制作雷达图实战
雷达图又叫蜘蛛网图,是一种对各项数据查看很明显的表现图,在很多游戏中,对游戏中的每个角色的分析图一般也用这种图. 下面,用HTML5的Cavas来实现雷达图. 效果 一.创建Canvas var mW ...
- canvas 绘制八卦图
绘制要点: 1.getContext('2d'); -->绘图环境,2维空间 2.fillRect(x,y,w,h); -->矩形:实心(黑色背景) 3.strokeRect(x,y,w, ...
- HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图
Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...
- HTML5 canvas绘图基础（电子名片生成器源码）
创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...
随机推荐
- hdu 1524 A Chess Game 博弈
题目链接 给出一个有向无环图, 上面放有一些棋子, 两个人轮流移动棋子, 当一个人无法移动时, 算输. 求出每一个点的sg值, 异或就可以.出度为0的点sg值为0. #include<bits/ ...
- 树莓派高级GPIO库，wiringpi2 for python使用笔记（五）i2c读取测试
wiringpi2显然也把i2c驱动带给了Python,手头上正巧有一个DS3231的模块,上边带了一个DS3231 RTC(实时时钟),与一片24C32,两个芯片均为iic总线设备,与树莓派接线如下 ...
- 生成输出url时，使用CSS来控制超链接的格式
在前文<生成输出url>中的第5点,介绍了使用ActionLink生成输出url中指定html标签属性. 例如, 假设Global.asax中的路由定义为: public static v ...
- PL/SQL database character set(AL32UTF8) and Client character set(ZHS16GBK) are different
启动PL/SQL Developer 报字符编码不一致错误 Database character set (AL32UTF8) and Client character set (ZHS16GBK) ...
- swig include使用方法
{% block content2 %} {% include "footer.html" %} {% endblock %} include语句必须放到 block模块中,不然不 ...
- 防止 XSS 攻击 解决方案
XSS又叫CSS英文缩写为Cross Site Script中文意思为跨站脚本攻击具体内容指的是恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入其中Web里面的html代码会被执 ...
- Session累计用户数据列表
OrderForm.html <body> <center> <h1 ><font size="20">Order Items& ...
- C++中头文件（.h）和源文件（.cpp）都应该写些什么
头文件(.h): 写类的声明(包括类里面的成员和方法的声明).函数原型.#define常数等,但一般来说不写出具体的实现. 在写头文件时需要注意,在开头和结尾处必须按照如下样式加上预编译语句(如下): ...
- UVa10082 WERTYU
#include <stdio.h>#include <string.h> int main(){ // 用C++提交AC char s[] = "`12345 ...
- <转>java编译问题：使用了未经检查或不安全的操作
使用了未经检查或不安全的操作 在本人用editplus写java文件时碰到的问题. 源代码 import java.util.*; class collection{ public stat ...