首页前端开发HTMLHTML5 Canvas组件绘制太极图案

HTML5 Canvas组件绘制太极图案

时间2024-01-25 14:01:13发布访客分类HTML浏览272
导读：收集整理的这篇文章主要介绍了html5教程-HTML5 Canvas组件绘制太极图案，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 一实现思路：...
收集整理的这篇文章主要介绍了html5教程-HTML5 Canvas组件绘制太极图案，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 一实现思路：
实现原理主要是利用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();  
 
绘制黑色半圆的代码如下： www.2cto.COM
 
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组件提供的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();  
 
绘制黑色半圆的代码如下： www.2cto.com
 
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教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

divHTMLhtml5post-format-gallery

若转载请注明出处： HTML5 Canvas组件绘制太极图案
本文地址： https://pptw.com/jishu/586607.html
HTML5利用json对象来存取复杂数据 HTML5播放video或者audio

游客 回复需填写必要信息
↑