HTML5 Canvas组件绘制太极图案
2016-07-29 00:00
495 查看
一实现思路:
实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆,首先绘
制两个半圆,分别为黑色和白色,组成一个圆,绘制完成以后再分别绘制一个黑色
和白色的圆在绘制好的黑白圆之内,半径恰好是黑白大圆一半。 最后在绘制好的两
个黑白小圆内分别填充白色和黑色的点,半径大小为10pixel左右。
二程序效果如下:
三关键程序解析:
绘制半圆的程序,其中200,200表示开始绘制圆心点坐标,第三个参数150表示绘制圆的半径
第四个参数表示开始角度,第五个参数表示结束角度,最后一个参数表示是否为顺时针或者逆时针
绘制白色半圆的代码如下:
绘制黑色半圆的代码如下:
在太极图案中添加文字的代码使用了透明处理,Canvas全局透明度设置函数
如下:
绘制文字的代码如下:
程序完全JavaScript代码如下:
我为什么要在插图上加上我的名字,因为发现文章被转载的时候居然没有被标出来!
实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆,首先绘
制两个半圆,分别为黑色和白色,组成一个圆,绘制完成以后再分别绘制一个黑色
和白色的圆在绘制好的黑白圆之内,半径恰好是黑白大圆一半。 最后在绘制好的两
个黑白小圆内分别填充白色和黑色的点,半径大小为10pixel左右。
二程序效果如下:
三关键程序解析:
绘制半圆的程序,其中200,200表示开始绘制圆心点坐标,第三个参数150表示绘制圆的半径
第四个参数表示开始角度,第五个参数表示结束角度,最后一个参数表示是否为顺时针或者逆时针
绘制白色半圆的代码如下:
ctx.fillStyle="#fff"; ctx.beginPath(); ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false); ctx.closePath(); ctx.fill();
绘制黑色半圆的代码如下:
ctx.fillStyle="#000"; ctx.beginPath(); ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false); ctx.closePath(); ctx.fill();
在太极图案中添加文字的代码使用了透明处理,Canvas全局透明度设置函数
如下:
// set transparency value ctx.globalAlpha = 0.2;
绘制文字的代码如下:
// Draw semi transparent text ctx.fillStyle = "#f00"; ctx.font = "32pt Arial"; ctx.fillText("Hello", 220, 200); ctx.fillText("Canvas", 100, 250);
程序完全JavaScript代码如下:
window.onload = function() {
var cvs = document.getElementById("canvas-path");
ctx = cvs.getContext("2d");
// Create circle, radius = 150
// start point(x, y), radius, start angle, end angle, boolean antiClockWise
ctx.fillStyle="#fff"; ctx.beginPath(); ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false); ctx.closePath(); ctx.fill();
ctx.fillStyle="#000"; ctx.beginPath(); ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false); ctx.closePath(); ctx.fill();
// draw sub circle
// start point(x, y), radius, start angle, end angle, boolean antiClockWise
ctx.fillStyle="#000";
ctx.beginPath();
ctx.arc(200, 275, 75, 0, Math.PI*2, false);
ctx.closePath();
ctx.fill();
ctx.fillStyle="#fff";
ctx.beginPath();
ctx.arc(200, 125, 75, 0, Math.PI*2, false);
ctx.closePath();
ctx.fill();
// fill black and white point
ctx.fillStyle="#fff";
ctx.beginPath();
ctx.arc(200, 275, 10, 0, Math.PI*2, false);
ctx.closePath();
ctx.fill();
ctx.fillStyle="#000";
ctx.beginPath();
ctx.arc(200, 125, 10, 0, Math.PI*2, false);
ctx.closePath();
ctx.fill();
// set transparency value ctx.globalAlpha = 0.2;
// Draw semi transparent text ctx.fillStyle = "#f00"; ctx.font = "32pt Arial"; ctx.fillText("Hello", 220, 200); ctx.fillText("Canvas", 100, 250);
ctx.globalAlpha = 1.0;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.fillStyle = "#000";
ctx.font = "20px Times New Roman";
ctx.fillText("-created by gloomyfish", 100, 30);
};
我为什么要在插图上加上我的名字,因为发现文章被转载的时候居然没有被标出来!
相关文章推荐
- HTML5 Canvas组件绘制太极图案
- HTML5 Canvas组件绘制太极图案
- HTML5利用canvas绘制太极图案
- HTML5 学习手笔三:canvas API 绘制树形图案B
- HTML5 学习手笔二:canvas API 绘制树形图案A
- echarts(国产)基于html5-canvas的开源图表绘制组件
- 使用HTML5 Canvas绘制一个太极,并令其转动
- HTML5 Canvas 绘制太极图
- js+html5实现canvas绘制圆形图案的方法
- HTML5 学习手笔二:canvas API 绘制树形图案A
- js+html5实现canvas绘制椭圆形图案的方法
- html5 javascript canvas API 绘制树形图案A
- js+html5实现canvas绘制圆形图案的方法
- html5--5-14 阶段小练习:绘制太极图案
- 通过HTML5标签canvas绘制一个八卦图案
- JavaScript中canvas绘制太极图案
- JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
- html5中canvas线段绘制太阳花
- HTML5利用Canvas绘制图形(使用图像、裁剪区域、使用文本。阴影效果和操作像素)
- HTML5画布Canvas坐标轴转换、图案填充、渐变与阴影