兼容IE8的canvas自制圆形比例图-白红宇

兼容IE8的canvas自制圆形比例图

阅读量：6636 次

发布时间：2019-06-25

本文共 14930 字，大约阅读时间需要 49 分钟。

兼容IE8的canvas自制圆形比例图，代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> IE8支持HTML5+CSS3 </TITLE>

<head>

<!--[if IE 8]>

#cv {

margin-top:100px;

margin-left:500px;

position: relative;

width: 300px;

height: 300px;

border:1px solid red;

border-radius: 20px;

background-color:#fff;

}

@media \0screen{

#cv{

behavior: url(ie-css3.htc);

}

.mySpan{

position:absolute;

font-size:50px;

z-index:99;

top: 208px;

left: 600px;

}

</style>

function test() {

//声明外圆的半径和内圆的半径

var myR = 80;

var myNeiR = 50;

//获取输入框里面的值

var myInput1_Value = parseInt($(".myInput1").val());

var myInput2_Value = parseInt($(".myInput2").val());

var canvas = document.getElementById("cv");

var cxt = canvas.getContext("2d");

//声明第一个进度条所占的百分比并转换成角度值

var myfirst = Math.PI * 2 * myInput1_Value / 100;

//声明第二个进度条所占的百分比并转换成角度值

var mysecond = Math.PI * 2 * myInput2_Value / 100;

//声明x,y边的变量，并获取变量的长度

var myYBian = Math.sin(myfirst) * 65;

var myXBian = Math.cos(myfirst) * 65;

console.log(myYBian + "===================" + myXBian);

//声明并获取最前面圆的圆心坐标

var myYuanX1 = null;

var myYuanY1 = null;

if (myInput1_Value >= 25 && myInput1_Value <= 50) {

var myYuanX1 = myXBian + 126;

var myYuanY1 = myYBian + 125;

} else if (myInput1_Value > 50 && myInput1_Value <= 75) {

var myYuanX1 = myXBian + 125;

var myYuanY1 = myYBian + 126;

} else if (myInput1_Value > 75 && myInput1_Value <= 100) {

var myYuanX1 = myXBian + 124;

var myYuanY1 = myYBian + 125;

} else {

var myYuanX1 = myXBian + 125;

var myYuanY1 = myYBian + 124;

}

var myYBian2 = Math.sin(myfirst + mysecond) * 65;

var myXBian2 = Math.cos(myfirst + mysecond) * 65;

var myYuanX2 = null;

var myYuanY2 = null;

if (myInput1_Value + myInput2_Value >= 25 && myInput1_Value + myInput2_Value <= 50) {

var myYuanX2 = myXBian2 + 126;

var myYuanY2 = myYBian2 + 125;

} else if (myInput1_Value + myInput2_Value > 50 && myInput1_Value + myInput2_Value <= 75) {

var myYuanX2 = myXBian2 + 125;

var myYuanY2 = myYBian2 + 126;

} else if (myInput1_Value + myInput2_Value > 75 && myInput1_Value + myInput2_Value <= 100) {

var myYuanX2 = myXBian2 + 124;

var myYuanY2 = myYBian2 + 125;

} else {

var myYuanX2 = myXBian2 + 125;

var myYuanY2 = myYBian2 + 124;

}

//画出最外面的一个圆形

cxt.fillStyle = "#ff3300";

cxt.beginPath();

cxt.arc(125, 125, myR, 0, Math.PI * 2, true);

cxt.closePath();

cxt.fill();

//再次重新声明变量颜色

cxt.fillStyle = "#0A72CB";

//画一个我角度为我所需要的扇形

DrawSector(canvas, myfirst, myfirst + mysecond, myR, true, false);

//画一个添加在我所画扇形前面的半圆

DrawSector3(canvas, myfirst + mysecond, myfirst + mysecond + Math.PI, (myR - myNeiR) / 2, true, false);

//重新给画笔声明颜色

cxt.fillStyle = "#000";

//画一个我角度为我所需要的扇形

DrawSector(canvas, 0 * Math.PI, myfirst, myR, true, false);

//画一个添加在我所画扇形前面的半圆

DrawSector2(canvas, myfirst, myfirst + Math.PI, (myR - myNeiR) / 2, true, false);

//画一个白色的实心圆形

cxt.fillStyle = "#fff";

cxt.beginPath();

cxt.arc(125, 125, myNeiR, 0, Math.PI * 2, true);

cxt.closePath();

cxt.fill();

//画进度条所需要调用的函数

function DrawSector(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {

var centerPoint = {x: 125, y: 125};

start_angle = start_angle || 0;

if (canvas_tag.getContext) {

//开始绘制路径

ctx = canvas_tag.getContext("2d");

ctx.beginPath();

//画出弧线

ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);

//画出结束半径

ctx.lineTo(centerPoint.x, centerPoint.y);

//如果需要填充就填充，不需要就算了

if (fill) {

ctx.fill();

} else {

ctx.closePath();

ctx.stroke();

}

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

}

//画最前面半圆所需要调用的函数

function DrawSector2(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {

var centerPoint = {x: myYuanX1, y: myYuanY1};

start_angle = start_angle || 0;

if (canvas_tag.getContext) {

//开始绘制路径

ctx = canvas_tag.getContext("2d");

ctx.beginPath();

//画出弧线

ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);

//画出结束半径

ctx.lineTo(centerPoint.x, centerPoint.y);

//如果需要填充就填充，不需要就算了

if (fill) {

ctx.fill();

} else {

ctx.closePath();

ctx.stroke();

}

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

}

//画最前面半圆所需要调用的函数

function DrawSector3(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {

var centerPoint = {x: myYuanX2, y: myYuanY2};

start_angle = start_angle || 0;

if (canvas_tag.getContext) {

//开始绘制路径

ctx = canvas_tag.getContext("2d");

ctx.beginPath();

//画出弧线

ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);

//画出结束半径

ctx.lineTo(centerPoint.x, centerPoint.y);

//如果需要填充就填充，不需要就算了

if (fill) {

ctx.fill();

} else {

ctx.closePath();

ctx.stroke();

}

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

}

window.onload = test;

</script>

</head>

<body>

<![endif]-->

<!--[if gte IE 9]>

<style>

#first{

margin-top:100px;

margin-left:500px;

border:1px solid red;

position: relative;

behavior: url(ie-css3.htc);

}

.mySpan{

position:absolute;

font-size:50px;

z-index:99;

top: 208px;

left: 600px;

}

</style>

</head>

<body>

</canvas>

console.log(Math.sin(Math.PI/6))

$(function() {

//声明外圆的半径和内圆的半径

var myR = 80;

var myNeiR = 50;

//获取输入框里面的值

var myInput1_Value = parseInt($(".myInput1").val());

var myInput2_Value = parseInt($(".myInput2").val());

//判断输入框里面的值相加是否超过100

if (myInput1_Value + myInput2_Value <= 100) {

$(".mySpan").html(myInput1_Value + "%")

//声明第一个进度条所占的百分比并转换成角度值

var myfirst = Math.PI * 2 * myInput1_Value / 100;

//声明第二个进度条所占的百分比并转换成角度值

var mysecond = Math.PI * 2 * myInput2_Value / 100;

//声明获取画笔

var canvas = document.getElementById('first');

//声明x,y边的变量，并获取变量的长度

var myYBian = Math.sin(myfirst) * 65;

var myXBian = Math.cos(myfirst) * 65;

console.log(myYBian + "===================" + myXBian);

//声明并获取最前面圆的圆心坐标

var myYuanX1 = null;

var myYuanY1 = null;

if (myInput1_Value >= 25 && myInput1_Value <= 50) {

var myYuanX1 = myXBian + 126;

var myYuanY1 = myYBian + 125;

} else if (myInput1_Value > 50 && myInput1_Value <= 75) {

var myYuanX1 = myXBian + 125;

var myYuanY1 = myYBian + 126;

} else if (myInput1_Value > 75 && myInput1_Value <= 100) {

var myYuanX1 = myXBian + 124;

var myYuanY1 = myYBian + 125;

} else {

var myYuanX1 = myXBian + 125;

var myYuanY1 = myYBian + 124;

}

var myYBian2 = Math.sin(myfirst + mysecond) * 65;

var myXBian2 = Math.cos(myfirst + mysecond) * 65;

var myYuanX2 = null;

var myYuanY2 = null;

if (myInput1_Value + myInput2_Value >= 25 && myInput1_Value + myInput2_Value <= 50) {

var myYuanX2 = myXBian2 + 126;

var myYuanY2 = myYBian2 + 125;

} else if (myInput1_Value + myInput2_Value > 50 && myInput1_Value + myInput2_Value <= 75) {

var myYuanX2 = myXBian2 + 125;

var myYuanY2 = myYBian2 + 126;

} else if (myInput1_Value + myInput2_Value > 75 && myInput1_Value + myInput2_Value <= 100) {

var myYuanX2 = myXBian2 + 124;

var myYuanY2 = myYBian2 + 125;

} else {

var myYuanX2 = myXBian2 + 125;

var myYuanY2 = myYBian2 + 124;

}

//画出最外面的一个圆形

var cxt = canvas.getContext("2d")

cxt.fillStyle = "#ff3300";

cxt.beginPath();

cxt.arc(125, 125, myR, 0, Math.PI * 2, true);

cxt.closePath();

cxt.fill();

//再次重新声明变量颜色

cxt.fillStyle = "#0A72CB";

//画一个我角度为我所需要的扇形

DrawSector(canvas, myfirst, myfirst + mysecond, myR, true, false);

//画一个添加在我所画扇形前面的半圆

DrawSector3(canvas, myfirst + mysecond, myfirst + mysecond + Math.PI, (myR - myNeiR) / 2, true, false);

//重新给画笔声明颜色

cxt.fillStyle = "#000";

//画一个我角度为我所需要的扇形

DrawSector(canvas, 0 * Math.PI, myfirst, myR, true, false);

//画一个添加在我所画扇形前面的半圆

DrawSector2(canvas, myfirst, myfirst + Math.PI, (myR - myNeiR) / 2, true, false);

//画一个白色的实心圆形

cxt.fillStyle = "#fff";

cxt.beginPath();

cxt.arc(125, 125, myNeiR, 0, Math.PI * 2, true);

cxt.closePath();

cxt.fill();

}

//画进度条所需要调用的函数

function DrawSector(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {

var centerPoint = {x: 125, y: 125};

start_angle = start_angle || 0;

if (canvas_tag.getContext) {

//开始绘制路径

ctx = canvas_tag.getContext("2d");

ctx.beginPath();

//画出弧线

ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);

//画出结束半径

ctx.lineTo(centerPoint.x, centerPoint.y);

//如果需要填充就填充，不需要就算了

if (fill) {

ctx.fill();

} else {

ctx.closePath();

ctx.stroke();

}

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

}

//画最前面半圆所需要调用的函数

function DrawSector2(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {

var centerPoint = {x: myYuanX1, y: myYuanY1};

start_angle = start_angle || 0;

if (canvas_tag.getContext) {

//开始绘制路径

ctx = canvas_tag.getContext("2d");

ctx.beginPath();

//画出弧线

ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);

//画出结束半径

ctx.lineTo(centerPoint.x, centerPoint.y);

//如果需要填充就填充，不需要就算了

if (fill) {

ctx.fill();

} else {

ctx.closePath();

ctx.stroke();

}

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

}

//画最前面半圆所需要调用的函数

function DrawSector3(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {

var centerPoint = {x: myYuanX2, y: myYuanY2};

start_angle = start_angle || 0;

if (canvas_tag.getContext) {

//开始绘制路径

ctx = canvas_tag.getContext("2d");

ctx.beginPath();

//画出弧线

ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);

//画出结束半径

ctx.lineTo(centerPoint.x, centerPoint.y);

//如果需要填充就填充，不需要就算了

if (fill) {

ctx.fill();

} else {

ctx.closePath();

ctx.stroke();

}

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

}

})

</script>

<![endif]-->

<![if !IE]>

<style>

#first{

margin-top:100px;

margin-left:500px;

border:1px solid red;

position: relative;

behavior: url(ie-css3.htc);

}

.mySpan{

position:absolute;

font-size:50px;

z-index:99;

top: 208px;

left: 600px;

}

</style>

</head>

<body>

console.log(Math.sin(Math.PI/6))

$(function() {

//声明外圆的半径和内圆的半径

var myR = 80;

var myNeiR = 50;

//获取输入框里面的值

var myInput1_Value = parseInt($(".myInput1").val());

var myInput2_Value = parseInt($(".myInput2").val());

//判断输入框里面的值相加是否超过100

if (myInput1_Value + myInput2_Value <= 100) {

$(".mySpan").html(myInput1_Value + "%")

//声明第一个进度条所占的百分比并转换成角度值

var myfirst = Math.PI * 2 * myInput1_Value / 100;

//声明第二个进度条所占的百分比并转换成角度值

var mysecond = Math.PI * 2 * myInput2_Value / 100;

//声明获取画笔

var canvas = document.getElementById('first');

//声明x,y边的变量，并获取变量的长度

var myYBian = Math.sin(myfirst) * 65;

var myXBian = Math.cos(myfirst) * 65;

console.log(myYBian + "===================" + myXBian);

//声明并获取最前面圆的圆心坐标

var myYuanX1 = null;

var myYuanY1 = null;

if (myInput1_Value >= 25 && myInput1_Value <= 50) {

var myYuanX1 = myXBian + 126;

var myYuanY1 = myYBian + 125;

} else if (myInput1_Value > 50 && myInput1_Value <= 75) {

var myYuanX1 = myXBian + 125;

var myYuanY1 = myYBian + 126;

} else if (myInput1_Value > 75 && myInput1_Value <= 100) {

var myYuanX1 = myXBian + 124;

var myYuanY1 = myYBian + 125;

} else {

var myYuanX1 = myXBian + 125;

var myYuanY1 = myYBian + 124;

}

var myYBian2 = Math.sin(myfirst + mysecond) * 65;

var myXBian2 = Math.cos(myfirst + mysecond) * 65;

var myYuanX2 = null;

var myYuanY2 = null;

if (myInput1_Value + myInput2_Value >= 25 && myInput1_Value + myInput2_Value <= 50) {

var myYuanX2 = myXBian2 + 126;

var myYuanY2 = myYBian2 + 125;

} else if (myInput1_Value + myInput2_Value > 50 && myInput1_Value + myInput2_Value <= 75) {

var myYuanX2 = myXBian2 + 125;

var myYuanY2 = myYBian2 + 126;

} else if (myInput1_Value + myInput2_Value > 75 && myInput1_Value + myInput2_Value <= 100) {

var myYuanX2 = myXBian2 + 124;

var myYuanY2 = myYBian2 + 125;

} else {

var myYuanX2 = myXBian2 + 125;

var myYuanY2 = myYBian2 + 124;

}

//画出最外面的一个圆形

var cxt = canvas.getContext("2d")

cxt.fillStyle = "#ff3300";

cxt.beginPath();

cxt.arc(125, 125, myR, 0, Math.PI * 2, true);

cxt.closePath();

cxt.fill();

//再次重新声明变量颜色

cxt.fillStyle = "#0A72CB";

//画一个我角度为我所需要的扇形

DrawSector(canvas, myfirst, myfirst + mysecond, myR, true, false);

//画一个添加在我所画扇形前面的半圆

DrawSector3(canvas, myfirst + mysecond, myfirst + mysecond + Math.PI, (myR - myNeiR) / 2, true, false);

//重新给画笔声明颜色

cxt.fillStyle = "#000";

//画一个我角度为我所需要的扇形

DrawSector(canvas, 0 * Math.PI, myfirst, myR, true, false);

//画一个添加在我所画扇形前面的半圆

DrawSector2(canvas, myfirst, myfirst + Math.PI, (myR - myNeiR) / 2, true, false);

//画一个白色的实心圆形

cxt.fillStyle = "#fff";

cxt.beginPath();

cxt.arc(125, 125, myNeiR, 0, Math.PI * 2, true);

cxt.closePath();

cxt.fill();

}

//画进度条所需要调用的函数

function DrawSector(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {

var centerPoint = {x: 125, y: 125};

start_angle = start_angle || 0;

if (canvas_tag.getContext) {

//开始绘制路径

ctx = canvas_tag.getContext("2d");

ctx.beginPath();

//画出弧线

ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);

//画出结束半径

ctx.lineTo(centerPoint.x, centerPoint.y);

//如果需要填充就填充，不需要就算了

if (fill) {

ctx.fill();

} else {

ctx.closePath();

ctx.stroke();

}

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

}

//画最前面半圆所需要调用的函数

function DrawSector2(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {

var centerPoint = {x: myYuanX1, y: myYuanY1};

start_angle = start_angle || 0;

if (canvas_tag.getContext) {

//开始绘制路径

ctx = canvas_tag.getContext("2d");

ctx.beginPath();

//画出弧线

ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);

//画出结束半径

ctx.lineTo(centerPoint.x, centerPoint.y);

//如果需要填充就填充，不需要就算了

if (fill) {

ctx.fill();

} else {

ctx.closePath();

ctx.stroke();

}

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

}

//画最前面半圆所需要调用的函数

function DrawSector3(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {

var centerPoint = {x: myYuanX2, y: myYuanY2};

start_angle = start_angle || 0;

if (canvas_tag.getContext) {

//开始绘制路径

ctx = canvas_tag.getContext("2d");

ctx.beginPath();

//画出弧线

ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);

//画出结束半径

ctx.lineTo(centerPoint.x, centerPoint.y);

//如果需要填充就填充，不需要就算了

if (fill) {

ctx.fill();

} else {

ctx.closePath();

ctx.stroke();

}

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

}

})

</script>

<![endif]>

</body>

转载于:https://www.cnblogs.com/haonantong/p/5065685.html

你可能感兴趣的文章

Android 滑动定位+吸附悬停效果实现

查看>>

国内唯一，阿里云入选全球区块链云服务报告，领先AWS、Google

查看>>

java B2B2C电子商务平台分析之十------服务网关zuul

查看>>

企业级框架整合Springmvc+mybatis+restful+bootstrap

查看>>

flutter沉浸式状态栏

查看>>

[转]Ubuntu 12.04软件中心安装flash插件过程失败解决办法

查看>>

47. SQL- 触发器之DDL 触发器

查看>>

Window server 2008服务器

查看>>

Linux查看系统cpu个数、核心书、线程数

Windows Server 2016 TP4中RDS新增“多点服务”

查看>>

我的友情链接

查看>>

nginx配置SSL实现服务器/客户端双向认证