HTML5 Canvas 绘图入门，仅供学习参考
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.beginPath();
cans.arc(200, 200, 100, -Math.PI*0.2, Math.PI);
cans.strokeStyle = '#2d95e4';
cans.lineWidth = 30;
cans.stroke();
cans.closePath();
var can2 = $$('can');
var cans2 = can.getContext('2d');
cans2.beginPath();
cans2.arc(200, 200, 100, -Math.PI*0.4, -Math.PI*0.2);
cans2.strokeStyle = '#55c9ff';
cans2.lineWidth = 20;
cans2.stroke();
cans2.closePath();
var can3 = $$('can');
var cans3 = can.getContext('2d');
cans3.beginPath();
cans3.arc(200, 200, 100, -Math.PI, -Math.PI*0.4);
cans3.strokeStyle = '#b6e7ff';
cans3.lineWidth = 20;
cans3.stroke();
cans3.closePath();
}
</script>
<body οnlοad="pageLoad();">
<canvas id="can" width="400px" height="400px"></canvas>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery.js"></script>
<style>
.process,.process1,#process2{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="300" style="border:1px solid #333;">
您的浏览器不支持canvas！
</canvas>
<button οnclick="actiondo()">圆</button><canvas class="process" width='85px' height='85'>80%</canvas>
<canvas class="process1" width="85px" height="85px">90%</canvas>
<canvas id="process2" width="400px" height="400px">60%</canvas>
<script>
var canvas = document.getElementById('myCanvas'),width = canvas.width,height = canvas.height,ctx = canvas.getContext('2d');
var step,startAngle,endAngle,add=Math.PI*2/100;
ctx.shadowOffsetX = 0; // 设置水平位移
ctx.shadowOffsetY = 0; // 设置垂直位移
ctx.shadowBlur = 10; // 设置模糊度
ctx.lineWidth = 1.0;
counterClockwise = false;
var x;
var y;
var radius;
var animation_interval = 20,n = 100;
var varName;
function actiondo(){
step=1;
startAngle=0;
ctx.strokeStyle ='#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);//圆圈颜色
ctx.shadowColor = '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6); // 设置阴影颜色
//圆心位置
x=Math.floor(Math.random()*1000+100);
y=Math.floor(Math.random()*100+100);
radius = Math.floor(Math.random()*50+50);
varName= setInterval(animation, animation_interval);
}
var animation = function () {
if (step <= n) {
endAngle = startAngle + add ;
drawArc(startAngle, endAngle);
startAngle = endAngle;
step++;
} else {
clearInterval(varName);
}
};
function drawArc(s, e) {
ctx.beginPath();
ctx.arc(x, y, radius, s, e, counterClockwise);
ctx.lineWidth = 1.0;
ctx.stroke();
}
drawProess();
function drawProess(){
$('canvas.process').each(function() {
var text=$(this).text();
var r = parseInt($(this).css("width"))/2;
var process = text.substring(0, text.length-1);
var canvas = this;
var context = canvas.getContext('2d');
context.clearRect(0, 0, 72, 72);
context.beginPath();
context.moveTo(33, 33);
context.arc(33, 33, 33, 0, Math.PI * 2, false);
context.closePath();
context.fillStyle = 'white';
context.fill();
context.beginPath();
context.moveTo(33, 33);
context.arc(33, 33, 33, 0, Math.PI * 2 * process / 100, false);
context.closePath();
context.fillStyle = 'blue';
context.fill();
context.beginPath();
context.moveTo(33, 33);
context.arc(33, 33, 28.5, 0, Math.PI * 2 , true);
context.closePath();
context.fillStyle = 'red';
context.fill();
process = 80;
context.beginPath();
context.moveTo(33, 33);
context.arc(33, 33, 29.5, 0, Math.PI * 2 * process /100, true);
context.closePath();
context.fillStyle = 'white';
context.fill();
context.beginPath();
context.moveTo(33, 33);
context.arc(33, 33, 23.5, 0, Math.PI * 2 , true);
context.closePath();
context.fillStyle = 'white';
context.fill();
context.font = "bold 12pt Arial";
context.fillStyle = '#666';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.moveTo(24, 24);
context.fillText(text, 33, 33);
});
$('canvas.process1').each(function() {
var text=$(this).text();
var r = parseInt($(this).css("width"))/2;
var process = text.substring(0, text.length-1);
var canvas = this;
var context = canvas.getContext('2d');
context.clearRect(0, 0, 72, 72);
context.beginPath();
context.moveTo(r, r);
context.arc(r, r, r, 0, Math.PI * 2, false);
context.closePath();
context.fillStyle = 'white';
context.fill();
context.beginPath();
context.moveTo(r, r);
context.arc(r, r, r+2, 0, Math.PI *2 , false);
context.closePath();
context.fillStyle = 'white';
context.fill();
process=60;
context.beginPath();
context.moveTo(r, r);
context.arc(r, r, r, 0, Math.PI *2 * process , false);
context.closePath();
context.fillStyle = 'blue';
context.fill();
process=40;
context.beginPath();
context.moveTo(r, r);
context.arc(r, r, r+1, 0, Math.PI *2 * process/100 , false);
context.closePath();
context.fillStyle = 'white';
context.fill();
process=40;
context.beginPath();
context.moveTo(r, r);
context.arc(r, r, r-1.5, 0, Math.PI * 2 * process / 100, false);
context.closePath();
context.fillStyle = 'yellow';
context.fill();
process=10;
context.beginPath();
context.moveTo(r, r);
context.arc(r, r, r-1.5, 0, Math.PI * 2 * process / 100, false);
context.closePath();
context.fillStyle = 'pink';
context.fill();
context.beginPath();
context.moveTo(r, r);
context.arc(r, r, r-7.5, 0, Math.PI * 2 , false);
context.closePath();
context.fillStyle = 'white';
context.fill();
context.font = "bold 12pt Arial";
context.fillStyle = '#666';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.moveTo(24, 24);
context.fillText(text, r, r);
});
test();
}
function test(){var can = document.getElementById('process2');
var cns = can.getContext("2d");
var r = 360*60/100;
cns.beginPath();
cns.arc(38,38,33,-Math.PI*50/100,Math.PI);
cns.strokeStyle="blue";
cns.lineWidth=10;
cns.stroke();
cns.closePath();
cns.beginPath();
cns.arc(38,38,33,Math.PI,-Math.PI*50/100);
cns.strokeStyle="red";
cns.lineWidth=5;
cns.stroke();
cns.closePath();
cns.beginPath();
cns.arc(38,38,33,Math.PI,-Math.PI*50/100);
cns.strokeStyle="yellow";
cns.lineWidth=5;
cns.stroke();
cns.closePath();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 移动Web开发指南</title>
<style type="text/css">
h1, h5
{
text-align: center;
}
canvas
{
float: left;
margin: 10px;
overflow: hidden;
}
</style>
<script type="text/javascript" language="javascript">
window.onload = function () {
drawCanvas(0, 0, "canvase_01", "red", 200, 200);
drawCanvas(0, 0, "canvase_02", "green", 200, 100);
drawCanvas(0, 0, "canvase_05", "blank", 300, 60);
drawCanvas(75, 60, "canvase_05", "gray", 150, 90);
drawCanvas(0, 0, "canvase_06", "blank", 300, 50);
drawCanvas(0, 50, "canvase_06", "red", 300, 50);
drawCanvas(0, 100, "canvase_06", "#F8CB1C", 300, 50);
drawCanvas(0, 0, "canvase_07", "green", 100, 150);
drawCanvas(100, 0, "canvase_07", "white", 100, 150);
drawCanvas(200, 0, "canvase_07", "red", 100, 150);
drawRound("canvase_03", "blue", 75, true);
drawRound("canvase_04", "yellow", 75, false);
drawRound("canvase_08", "red", 75, true);
drawRound("canvase_08", "yellow", 75, false);
};
/*
* Canvas 画非圆图形测试
* x: 图形的X轴开始坐标
* y: 图形的Y轴开始坐标
* id： 元素id
* bgColor: 填充的背景颜色
* width: 宽
* height: 高
*/
function drawCanvas(x, y, id, bgColor, width, height) {
var canvas = document.getElementById(id);
if (canvas != null && canvas != undefined) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = bgColor;
//第一个和第二个参数，代表开始坐标
//第三个参数是图形的宽
//第四个参数是图形的高
ctx.fillRect(Number(x), Number(y), Number(width), Number(height));
}
}
/*
* Canvas 画圆测试
* id： 元素id
* bgColor: 填充的背景颜色
* R： 圆半径
* IsRound: 是否为正圆(true正圆、false 半圆)
*/
function drawRound(id, bgColor, R, IsRound) {
var canvas = document.getElementById(id);
if (canvas != null && canvas != undefined) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = bgColor;
ctx.beginPath();
var round = Math.PI;
if (Boolean(IsRound))
round = Math.PI * 2;
//第一个和第二个参数，代表圆心坐标
//第三个参数是圆的半径
//第四个参数代表圆周起始位置(0 起始位置。沿顺时针路线，分别是0.5 (正下方)，1 PI和1.5 PI(正上方)，为画饼图提供了扇形范围的依据)
//第五个参数是弧长(Math.PI*1 半圆、Math.PI*2就是整个圆)
ctx.arc(150, 75, Number(R), 0, round, true);
ctx.closePath();
ctx.fill();
}
}
</script>
</head>
<body>
<header>
<section>
<h1>
HTML5 移动Web开发指南</h1>
</section>
</header>
<fieldset>
<legend>HTML5 新元素--Canvas绘图元素</legend>
<article>
<section>
<canvas id="canvase_01">
您的浏览器不支持Canvas元素！
</canvas>
<canvas id="canvase_02">
您的浏览器不支持Canvas元素！
</canvas>
<canvas id="canvase_03">
您的浏览器不支持Canvas元素！
</canvas>
<canvas id="canvase_04">
您的浏览器不支持Canvas元素！
</canvas>
<canvas id="canvase_05">
您的浏览器不支持Canvas元素！
</canvas>
<canvas id="canvase_06">
您的浏览器不支持Canvas元素！
</canvas>
<canvas id="canvase_07">
您的浏览器不支持Canvas元素！
</canvas>
<canvas id="canvase_08">
您的浏览器不支持Canvas元素！
</canvas>
</section>
</article>
</fieldset>
<footer>
<section>
<h5>
<span style="font-family: Arial, Helvetica, sans-serif;">HTML5 新元素--Canvas绘图元素</span>
</h5>
</section>
</footer>
</body>
</html>
扫一扫
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
