JS、キャンバスに円錐を描画する実装コード

小云云
リリース: 2017-12-14 09:28:11
オリジナル
1877 人が閲覧しました

この記事では主に、HTML で Canvas 関数を使用して円錐グラフィックの例を描画する方法について説明します。

以下は私たちが共有するサンプルコードです:


<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<canvas id=&#39;cvs&#39; width=&#39;1000&#39; height="800">
</canvas>
<script>
const cvs =document.getElementById(&#39;cvs&#39;);

 // 计算画布的宽度
  const width = cvs.offsetWidth;
  // 计算画布的高度
 const  height = cvs.offsetHeight;
const ctx = cvs.getContext(&#39;2d&#39;);
  // 设置宽高
  cvs.width = width;
  cvs.height = height;
/**
ctx:context
x,y:偏移 纵横坐标
w:度
h:高
color:颜色 数组,可以把颜色提取出来方便自定义
*/
var Cone = function(ctx,x,y,w,h,d,color){
ctx.save();
ctx.translate(x, y);
var blockHeight=h;
// 中点
var x2 = 0;
var y2 = 20;
var k2 = 10;
var w2 = w;
var h2 = h;
// 递减度
var decrease = d; 
 ctx.beginPath();
ctx.moveTo(x2+w2,y2);
// 椭圆加了边框,所以加1减1
ctx.bezierCurveTo(x2+w2, y2+k2, x2-w2, y2+k2, x2-w2-1, y2);

ctx.lineTo(x2-w2+decrease,y2+blockHeight);
ctx.bezierCurveTo(x2-w2+decrease, y2+blockHeight+k2, x2+w2-decrease, y2+blockHeight+k2, x2+w2-decrease, y2+blockHeight);
ctx.lineTo(x2+w2+1,y2);
var linear = ctx.createLinearGradient(x2-w2, y2,x2+w2-decrease, y2+blockHeight);
linear.addColorStop(0,color[0]);
linear.addColorStop(1,color[1]);
ctx.fillStyle = linear ; 
ctx.strokeStyle=linear 
ctx.fill();
//ctx.stroke();
ctx.closePath();
//画椭圆
ctx.beginPath();
ctx.moveTo(x2-w2, y2);
ctx.bezierCurveTo(x2-w2, y2-k2, x2+w2, y2-k2, x2+w2, y2);
ctx.bezierCurveTo(x2+w2, y2+k2, x2-w2, y2+k2, x2-w2, y2);
var linear = ctx.createLinearGradient(x2-w2, y2,x2+w2-decrease, y2+blockHeight);
linear.addColorStop(1,color[0]);
linear.addColorStop(0,color[1]);
ctx.fillStyle = linear ; 
ctx.strokeStyle=linear 
ctx.closePath();

ctx.fill();
ctx.stroke();

ctx.restore();
};
function dr(m){
const colorList =[
{
color:[&#39;#76e3ff&#39;,&#39;#2895ea&#39;],
height:60
},
{
color:[&#39;#17ead9&#39;,&#39;#5d7ce9&#39;],
height:30
},
{
color:[&#39;#1ca5e5&#39;,&#39;#d381ff&#39;],
height:40
},
{
color:[&#39;#ffa867&#39;,&#39;#ff599e&#39;],
height:70
},
{
color:[&#39;#ffa6e3&#39;,&#39;#ec6a70&#39;],
height:50
},
{
color:[&#39;#f9c298&#39;,&#39;#d9436a&#39;],
height:30
},
{
color:[&#39;#eb767b&#39;,&#39;#9971dc&#39;],
height:30
},
{
color:[&#39;#f06af9&#39;,&#39;#5983ff&#39;],
height:100
},
];
const space = 20;
let coneHeight = 0;
// 间隔
const gap = 20;
const x = 380;
const y = 20;
const angle = 30;
let coneWidth=0;
colorList.forEach((item)=>{
coneHeight += item.height +space;
});
// 最下面的先画(层级)
colorList.reverse().forEach((item,index)=>{
const decrease =Math.tan(Math.PI*angle/180)*(item.height+space);
coneWidth=coneWidth + decrease;
coneHeight = coneHeight-item.height - space;
//圆锥
Cone(ctx,x,coneHeight ,coneWidth ,item.height,decrease,item.color);
// 中点
const cX =parseInt(x)+0.5;
const cY = parseInt(coneHeight + space+ item.height/2)+0.5;
//文字
ctx.save();
ctx.translate(cX , cY );
ctx.textBaseline=&#39;top&#39;;
ctx.textAlign=&#39;center&#39;;
const fontSize = item.height/2>=40?40:item.height/2;
ctx.font = fontSize + &#39;px serif&#39;;
//const textMetrics = ctx.measureText(&#39;Hello World&#39;);
ctx.fillStyle = &#39;#ffffff&#39;;
ctx.fillText(&#39;5000&#39;,0,-fontSize/3);
ctx.restore();
const xLineA =parseInt(coneWidth-decrease/2)+10;
const xLine =parseInt(m+xLineA )>=x?x:m+xLineA ;
//线
ctx.save();
ctx.translate(cX , cY );
ctx.setLineDash([3,2]); 
ctx.strokeStyle = &#39;#a4a4a4&#39;; 
ctx.beginPath(); 
ctx.moveTo(xLineA , 0); 
ctx.lineTo(xLine +20, 0); 
ctx.stroke();
ctx.restore();
//描述文字
ctx.save();
ctx.translate(cX , cY );
ctx.textBaseline=&#39;middle&#39;;
ctx.textAlign=&#39;left&#39;;
ctx.font = &#39;22px serif&#39;;
//const textMetrics = ctx.measureText(&#39;Hello World&#39;);
ctx.fillStyle = &#39;#4a4a4a&#39;;
ctx.fillText(&#39;进入收件列表2&#39;,xLine+gap ,0);
ctx.restore();
//转化率文字
ctx.save();
ctx.translate(cX , cY );
ctx.textBaseline=&#39;middle&#39;;
ctx.textAlign=&#39;left&#39;;
ctx.font = &#39;28px bold serif &#39;;
ctx.fillStyle = &#39;#007dfd&#39;;
ctx.fillText(&#39;20%&#39;,xLine+gap ,(item.height+gap)/2 );
ctx.restore();
});
}
let m=0;  
let gravity =10;   
(function drawFrame(){
      window.requestAnimationFrame(drawFrame,cvs);
      ctx.clearRect(0,0,cvs.width,cvs.height);
m += gravity;
      dr(m);
})();
</script>
</body>
</html>
ログイン後にコピー


これはScript Houseによるテスト後の完成した画像です:

関連する推奨事項:

描画方法の紹介JS の五芒星 _javascript スキル

回転アニメーションを実装するための JavaScript キャンバス

キャンバスを使用して時計の実装手順を作成する

以上がJS、キャンバスに円錐を描画する実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート