1. Canvas繪制五環(huán)
<script>
//1.獲取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.繪制奧運五環(huán)
//第一個五環(huán)
//遍歷
//顏色數(shù)組
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();
};
//繪制第二個五環(huán)
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();
};
</script>
canvas繪制五環(huán)渲染效果
2.Canvas繪制餅狀圖以及繪制文字
<script>
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;
//數(shù)據(jù)
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<dataArr.length;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;
//文字坐標(biāo)
var textX = canW + (radius+30)* Math.cos(textAngle);
var textY = canH + (radius+30)* Math.sin(textAngle);
//獲取文字內(nèi)容
var text = dataArr[i].name + dataArr[i].value *100 + '%';
//設(shè)置文字字號
ctx.font = "20px '微弱雅黑'";
ctx.strokeStyle = dataArr[i].color;
//設(shè)置左邊文字的對齊方式
if(textAngle>90 * Math.PI/180 && textAngle<270 *Math.PI/180){
ctx.textAlign = 'end';
}
ctx.strokeText(text,textX,textY);
//更新起點,讓當(dāng)前的終點角度成為下一個圖形的起點的角度
beginAngle = endAngle;
}
</script>
Canvas繪制餅狀圖以及文字渲染效果
3. Canvas繪制一堆不斷變大變小的隨機(jī)移動的氣泡
- html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>氣泡變化</title>
</head>
<body>
<canvas id="canvas" width="1200px" height="800px">
</canvas>
</body>
<script src="main.js">
</script>
</html>
- js文件
<script >
//獲取context
var canvas=document.querySelector('canvas'),
context=canvas.getContext('2d');
// 這個數(shù)組用于保存畫布上出現(xiàn)的所有球
var balls = [];
// 用于表示球的所有細(xì)節(jié)的Ball函數(shù)
// x能犯、y分別是氣泡初始化的位置
//radius是氣泡的半徑-隨機(jī)
//strokeColor 繪制顏色 -隨機(jī)
//填充顏色-隨機(jī)
//flag半徑變大還是變小
//flagx x增大還是減小
//flagy y增加還是減少
// 構(gòu)建一個氣泡對象
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;
}
// 向數(shù)組添加小球
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;
}
// 創(chuàng)建新的ball對象
var ball = new Ball(x,y);
// 將其保存在balls數(shù)組中
balls.push(ball);
}
//繪制圖像并且在20ms后再次繪制
function drawFrame() {
// 清除畫布
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
// 循環(huán)所有的球,并重新定義他們的位置和大小
for(var i=0; i<balls.length; 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);
}
//調(diào)用并且初始化小球
for(var i=0;i<50;i++){
addBall();
}
drawFrame();
</script>
效果渲染示例
4.Canvas繪制簡單的時鐘
- html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clock</title>
<style>
body {
background: #dddddd;
}
#canvas {
position: absolute;
left: 0px;
top: 0px;
margin: 20px;
background: #ffffff;
border: thin solid #aaaaaa;
}
</style>
</head>
<body>
<canvas id='canvas' width='400' height='400'>
Canvas not supported
</canvas>
<script src='example.js'></script>
</body>
</html>
- 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的基本介紹先介紹到這里坦康；如果對您有所幫助的話卷仑，請點贊并關(guān)注哦姐浮，我會不定時的更新一下自己學(xué)習(xí)的經(jīng)驗以及見解浩嫌，和大家進(jìn)行交流杂拨。
您贊就是是我最大的動力Ｗㄆ铡！弹沽！
