The effect is as shown in the figure below
and the code is as follows:
demo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="demo.js"></script>
<style>
body{
text-align: center;
}
canvas{
background-color: blanchedalmond;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="1500" height="650">
你的浏览器不支持
</canvas>
</body>
</html>
demo.js：
var canvas,context;
// 台球桌
function drawRect(x1,y1,width,height,radius,color="green"){
// 圆角矩形 参数:左上角位置,宽,高,半径,颜色
var x2=x1+width,y2=y1;
context.save();
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.arcTo(x2+radius,y2,x2+radius,y2+radius,radius);//x1,y1,x2,y2,radius
context.lineTo(x2+radius,y2+radius+height);
context.arcTo(x2+radius,y2+radius*2+height,x2,y2+radius*2+height,radius);
context.lineTo(x1,y1+radius*2+height);
context.arcTo(x1-radius,y1+radius*2+height,x1-radius,y1+radius+height,radius);
context.lineTo(x1-radius,y1+radius);
context.arcTo(x1-radius,y1,x1,y1,radius);
context.lineWidth=40;
context.strokeStyle="brown";
context.stroke();
context.fillStyle=color;
context.fill();
context.restore();
// 六个球洞
drwaHole(x1-radius/2,y1+radius/2,radius/1.5);//左上
drwaHole(x1+radius+width-20,y1+radius/2,radius/1.5);//右上
drwaHole(x1+(radius+width)/2,y1+radius/2-5,radius/1.5);//中上
drwaHole(x1+(radius+width)/2,y1+radius*1.5+height+5,radius/1.5);//中下
drwaHole(x1+radius+width-20,y1+radius*1.5+height,radius/1.5);//右下
drwaHole(x1-radius/2,y1+radius*1.5+height,radius/1.5);//左下
}
function drwaHole(x,y,radius){
context.beginPath();
context.save();
context.arc(x,y,radius,0,2*Math.PI,false);
context.fillStyle="black";
context.fill();
context.restore();
}
function drawRod(){
// 球杆
context.save();
// context.rect(100,300,400,20);
context.moveTo(100,295);
context.lineTo(500,300);
context.lineTo(500,310);
context.lineTo(100,315);
context.closePath();
context.fillStyle="orange";
context.fill();
context.restore();
}
function drawBall(x,y,radius,color="red"){
// 画台球
context.save();
context.beginPath();
var ctx=context;
ctx.lineWidth=0.4;//球面
ctx.arc(x,y,radius,0,2*Math.PI,false);
var gl=ctx.createRadialGradient(x-5,y-5,1,x,y,radius);
gl.addColorStop(0,'white');
gl.addColorStop(1,color);
ctx.fillStyle = gl;
ctx.fill();
ctx.stroke();
context.restore();
}
function addShadow(){
// 添加阴影
context.shadowColor="Black";
context.shadowBlur=10;
context.shadowOffsetX=5;
context.shadowOffsetY=5;
}
function snooker(x,y,radius,num){
// 斯诺克摆球算法,主球坐标,半径,轴球数量
cos=Math.sqrt(3)/2;
for(var i=0;i<num;i++){
var temp=4*cos*radius*i;//轴球间轴心距
drawBall(temp+x,y,radius,randomColor());
for(var j=1;j<2*(num-i)-1;j++){
var x1=j*2*cos*radius,y1=j*radius;
drawBall(temp+x+x1,y+y1,radius,randomColor());
drawBall(temp+x+x1,y-y1,radius,randomColor());
}
}
}
function randomColor(){
// 随机颜色
var arr=["red","blue","black","green","yellow","purple","pink","grey","orange"];
var num=Math.floor(Math.random() * 9);
return arr[num];
}
function setFont(){
context.font="90 100px Arial";
// context.textAlign="center";
}
function Init(){
canvas=document.getElementById("mycanvas");
context=canvas.getContext("2d");
//台球桌
// 绘制圆角矩形
drawRect(200,30,1000,500,40);
// 球
drawBall(600,300,30);
snooker(900,300,20,3);
// 球杆
drawRod();
// 字体
setFont();
// 阴影
addShadow();
context.fillText("Hello World", 450, 200);
}
window.addEventListener("load",Init,false);