html5绘制五环,浅析HTML5的Canvas——案例绘制

1. Canvas绘制五环

//1.获取canvas和上下文

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

var ctx = canvas.getContext('2d');

//2.绘制奥运五环

//第一个五环

//遍历

//颜色数组

var colorArr = ['red','green','yellow','blue','black'];

for(var i = 0;i<5;i++){

ctx.beginPath();

ctx.arc(100 *(i+1),150,80,0,2 * Math.PI);

ctx.strokeStyle = colorArr[i];

ctx.lineWidth = 5;

ctx.stroke();

};

//绘制第二个五环

var colorArr = ['red','green','yellow','blue','black'];

for(var i = 0;i<5;i++){//0,1,2

ctx.beginPath();

if(i<3){

ctx.arc(100 *(i+1),350,80,0,2 * Math.PI);

}else{//3,4

ctx.arc(100 *(i-2) + 40,350 + 80,80,0,2 * Math.PI);

}

ctx.strokeStyle = colorArr[i];

ctx.lineWidth = 5;

ctx.stroke();

};

canvas绘制五环渲染效果

2.Canvas绘制饼状图以及绘制文字

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

var ctx = canvas.getContext('2d');

//2.绘制饼状图

//常量

var canW = canvas.width * 0.5;//圆心

var canH = canvas.height * 0.5;//圆心

var radius = 150;

//数据

var dataArr = [

{name:'北京',color:'yellow',value:'0.3'},

{name:'上海',color:'red',value:'0.2'},

{name:'广州',color:'green',value:'0.1'},

{name:'深圳',color:'blue',value:'0.15'},

{name:'杭州',color:'purple',value:'0.25'}

];

//3.遍历并绘制扇形

var beginAngle = -90 * Math.PI/180;

for(var i= 0;i

//3.1获取每一个扇形的角度

var temAngle = dataArr[i].value *360 *Math.PI/180;

//3.2获取终点

var endAngle = beginAngle + temAngle;

//开启新路径

ctx.beginPath();

ctx.moveTo(canW,canH);

ctx.arc(canW,canH,radius,beginAngle,endAngle);

ctx.fillStyle = dataArr[i].color;

ctx.fill();

//3.3绘制文字

//获取每一个文字的角度

var textAngle = beginAngle + temAngle * 0.5;

//文字坐标

var textX = canW + (radius+30)* Math.cos(textAngle);

var textY = canH + (radius+30)* Math.sin(textAngle);

//获取文字内容

var text = dataArr[i].name + dataArr[i].value *100 + '%';

//设置文字字号

ctx.font = "20px '微弱雅黑'";

ctx.strokeStyle = dataArr[i].color;

//设置左边文字的对齐方式

if(textAngle>90 * Math.PI/180 && textAngle<270 *Math.PI/180){

ctx.textAlign = 'end';

}

ctx.strokeText(text,textX,textY);

//更新起点,让当前的终点角度成为下一个图形的起点的角度

beginAngle = endAngle;

}

Canvas绘制饼状图以及文字渲染效果

3. Canvas绘制一堆不断变大变小的随机移动的气泡

html文件

气泡变化

js文件

//获取context

var canvas=document.querySelector('canvas'),

context=canvas.getContext('2d');

// 这个数组用于保存画布上出现的所有球

var balls = [];

// 用于表示球的所有细节的Ball函数

// x、y分别是气泡初始化的位置

//radius是气泡的半径-随机

//strokeColor 绘制颜色 -随机

//填充颜色-随机

//flag半径变大还是变小

//flagx x增大还是减小

//flagy y增加还是减少

// 构建一个气泡对象

function Ball(x, y) {

this.x = x;

this.y = y;

this.radius = Math.round(Math.random()*10)*10;

this.strokeColor = 'rgba('+Math.round(Math.random()*10)*25+','+Math.round(Math.random()*10)*25+','+Math.round(Math.random()*10)*25+',0)';

this.fillColor = 'rgba('+Math.round(Math.random()*10)*25+','+Math.round(Math.random()*10)*25+','+Math.round(Math.random()*10)*25+','+Math.round(Math.random()*10)/10+')';

this.flag=1;

this.flagx=1;

this.flagy=1;

}

// 向数组添加小球

function addBall() {

// 小球半径

var radius = Math.round(Math.random()*10)*10;

var x=0,y=0;

if (x<200||x>1000){

x=Math.round(Math.random()*10)*100;

}

if (y<200||x>600){

y=Math.round(Math.random()*10)*60;

}

// 创建新的ball对象

var ball = new Ball(x,y);

// 将其保存在balls数组中

balls.push(ball);

}

//绘制图像并且在20ms后再次绘制

function drawFrame() {

// 清除画布

context.clearRect(0, 0, canvas.width, canvas.height);

context.beginPath();

// 循环所有的球,并重新定义他们的位置和大小

for(var i=0; i

if (balls[i].flagx==1){

balls[i].x++;

if (balls[i].x>=800){

balls[i].flagx=0;

}

}else if(balls[i].flagx==0){

balls[i].x--;

if (balls[i].x<=0){

balls[i].flagx=1;

}

}

if (balls[i].flagy==1){

balls[i].y++;

if (balls[i].y>=600){

balls[i].flagy=0;

}

}else if(balls[i].flagy==0){

balls[i].y--;

if (balls[i].y<=0){

balls[i].flagy=1;

}

}

if (balls[i].flag==1){

balls[i].radius++;

balls[i].y++;

if (balls[i].radius>=100){

balls[i].flag=0;

}

}else if (balls[i].flag==0){

balls[i].radius--;

balls[i].x--;

balls[i].y--;

if (balls[i].radius<=0){

balls[i].flag=1;

}

}

var ball = balls[i];

context.beginPath();

context.fillStyle = balls[i].fillColor;

context.strokeStyle=balls[i].strokeColor;

// 绘制球

context.arc(balls[i].x, balls[i].y, balls[i].radius, 0, Math.PI*2);

context.lineWidth = 0;

context.fill();

context.stroke();

}

// 20毫秒后绘制下一帧

setTimeout(drawFrame, 20);

}

//调用并且初始化小球

for(var i=0;i<50;i++){

addBall();

}

drawFrame();

效果渲染示例

4.Canvas绘制简单的时钟

html文件

Clock

body {

background: #dddddd;

}

#canvas {

position: absolute;

left: 0px;

top: 0px;

margin: 20px;

background: #ffffff;

border: thin solid #aaaaaa;

}

Canvas not supported

js文件

const canvas = document.getElementById('canvas'),

context = canvas.getContext('2d'),

FONT_HEIGHT = 15,

MARGIN = 35,

HAND_TRUNCATION = canvas.width / 25,

HOUR_HAND_TRUNCATION = canvas.width / 10,

NUMERAL_SPACING = 20,

RADIUS = canvas.width / 2 - MARGIN,

HAND_RADIUS = RADIUS + NUMERAL_SPACING;

// Functions.....................................................

function drawCircle() {

context.beginPath();

context.arc(canvas.width / 2, canvas.height / 2,

RADIUS, 0, Math.PI * 2, true);

context.stroke();

}

function drawNumerals() {

let numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],

angle = 0,

numeralWidth = 0;

numerals.forEach(function(numeral) {

angle = Math.PI / 6 * (numeral - 3);

numeralWidth = context.measureText(numeral).width;

context.fillText(numeral,

canvas.width / 2 + Math.cos(angle) * (HAND_RADIUS) -

numeralWidth / 2,

canvas.height / 2 + Math.sin(angle) * (HAND_RADIUS) +

FONT_HEIGHT / 3);

});

}

function drawCenter() {

context.beginPath();

context.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2, true);

context.fill();

}

function drawHand(loc, isHour) {

let angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,

handRadius = isHour ?

RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION :

RADIUS - HAND_TRUNCATION;

context.moveTo(canvas.width / 2, canvas.height / 2);

context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius,

canvas.height / 2 + Math.sin(angle) * handRadius);

context.stroke();

}

function drawHands() {

let date = new Date,

hour = date.getHours();

hour = hour > 12 ? hour - 12 : hour;

drawHand(hour * 5 + (date.getMinutes() / 60) * 5, true, 0.5);

drawHand(date.getMinutes(), false, 0.5);

drawHand(date.getSeconds(), false, 0.2);

}

function drawClock() {

context.clearRect(0, 0, canvas.width, canvas.height);

drawCircle();

drawCenter();

drawHands();

drawNumerals();

}

// Initialization................................................

context.font = FONT_HEIGHT + 'px Arial';

loop = setInterval(drawClock, 1000);

canvas时钟渲染图

Canvas的基本介绍先介绍到这里；如果对您有所帮助的话，请点赞并关注哦，我会不定时的更新一下自己学习的经验以及见解，和大家进行交流。

您赞就是是我最大的动力！！！