个人中心
gpt4 book ai didi

javascript - 如何在canvas html5中使用图像填充样式

转载 作者：行者123 更新时间：2023-12-02 16:20:59 24 4
gpt4 key购买 nike

我正在使用这个旋转轮

http://tpstatic.com/_sotc/sites/default/files/1010/source/roulettewheel.html

我想将背景颜色更改为背景图像。我不知道该怎么做。如果有人好心地向我展示将图像添加到 Canvas 形状/元素的路径。我知道它与 fillStyle() 有关。这是代码:

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=windows-1252">
 </head>
 <body>
     <input type="button" value="spin" onclick="spin();" style="float: left;">
 <canvas id="wheelcanvas" width="600" height="600"></canvas>
 <script type="application/javascript">

    var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
           "#2E2C75", "#673A7E", "#CC0071", "#F80120",
           "#F35B20", "#FB9A00", "#FFCC00", "#FEF200","#FEF200"];
    var restaraunts = ["$10", "$20", "$30", "$40",
                 "$50", "$60", "$70", "$80",
                 "$90", "$100", "$120", "$150","HELLO"];

    var startAngle = 0;
    var arc = Math.PI / 6;
    var spinTimeout = null;

    var spinArcStart = 10;
    var spinTime = 0;
    var spinTimeTotal = 0;

    var ctx;

  function draw() {
   drawRouletteWheel();
  }

 function drawRouletteWheel() {
 var canvas = document.getElementById("wheelcanvas");
  if (canvas.getContext) {
  var outsideRadius = 200;
  var textRadius = 160;
  var insideRadius = 125;

  ctx = canvas.getContext("2d");
  ctx.clearRect(0,0,600,600);


  ctx.strokeStyle = "green";
  ctx.lineWidth = 1;

  ctx.font = 'bold 14px sans-serif';

  for(var i = 0; i < 14; i++) {
    var angle = startAngle + i * arc;
    ctx.fillStyle = colors[i];

    ctx.beginPath();
    ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
    ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
    ctx.stroke();
    ctx.fill();

    ctx.save();
    ctx.shadowOffsetX = -1;
    ctx.shadowOffsetY = -1;
    ctx.shadowBlur    = 0;
    ctx.shadowColor   = "rgb(220,220,220)";
    ctx.fillStyle = "black";
    ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
    ctx.rotate(angle + arc / 2 + Math.PI / 2);
    var text = restaraunts[i];
    ctx.fillText(text, -ctx.measureText(text).width /2, 2);
    ctx.restore();
  } 

  //Arrow
  ctx.fillStyle = "green";
  ctx.beginPath();
  ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
  ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
  ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
  ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
  ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
  ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
  ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
  ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
  ctx.fill();
 }
}

function spin() {
 spinAngleStart = Math.random() * 10 + 10;
 spinTime = 0;
 spinTimeTotal = Math.random() * 3 + 4 * 1000;
 rotateWheel();
}

function rotateWheel() {
spinTime += 30;
if(spinTime >= spinTimeTotal) {
  stopRotateWheel();
  return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}

function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 30px sans-serif';
var text = restaraunts[index]
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}

function easeOut(t, b, c, d) {
var ts = (t/=d)*t;
var tc = ts*t;
return b+c*(tc + -3*ts + 3*t);
}

draw();
</script>
</body>
</html>

这是空旋转轮的预览。我想为每个人贴上不同的图像。 Spin Wheel Image

最佳答案

您可以使用context.pattern来创建一个模式来填充您的轮子:

enter image description here 

var pattern1,pattern2;

var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
              "#2E2C75", "#673A7E", "#CC0071", "#F80120",
              "#F35B20", "#FB9A00", "#FFCC00", "#FEF200","#FEF200"];
var restaraunts = ["$10", "$20", "$30", "$40",
                   "$50", "$60", "$70", "$80",
                   "$90", "$100", "$120", "$150","HELLO"];

var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;

var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;

var canvas = document.getElementById("wheelcanvas");
var ctx = canvas.getContext("2d");


var img1=new Image();
img1.onload=start;
img1.src="https://dl.dropboxusercontent.com/u/139992952/multple/mm.jpg";
var img2=new Image();
img2.onload=start;
img2.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/water1.jpg";
var imgCount=2;
function start(){
  if(--imgCount>0){return;}
  pattern1=ctx.createPattern(img1,'repeat');
  pattern2=ctx.createPattern(img2,'repeat');
  draw();
}



function draw() {
  drawRouletteWheel();
}

function drawRouletteWheel() {
  var outsideRadius = 200;
  var textRadius = 160;
  var insideRadius = 125;

  ctx.clearRect(0,0,600,600);

  ctx.strokeStyle = "green";
  ctx.lineWidth = 1;

  ctx.font = 'bold 14px sans-serif';

  for(var i = 0; i < 14; i++) {
    var angle = startAngle + i * arc;
    ctx.fillStyle = (i/2==parseInt(i/2))?pattern1:pattern2; //colors[i];

    ctx.beginPath();
    ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
    ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
    ctx.stroke();
    ctx.fill();

    ctx.save();
    ctx.shadowOffsetX = -1;
    ctx.shadowOffsetY = -1;
    ctx.shadowBlur    = 0;
    ctx.shadowColor   = "rgb(220,220,220)";
    ctx.fillStyle = "black";
    ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
    ctx.rotate(angle + arc / 2 + Math.PI / 2);
    var text = restaraunts[i];
    ctx.fillText(text, -ctx.measureText(text).width /2, 2);
    ctx.restore();
  } 

  //Arrow
  ctx.fillStyle = "green";
  ctx.beginPath();
  ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
  ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
  ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
  ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
  ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
  ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
  ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
  ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
  ctx.fill();
}

function spin() {
  spinAngleStart = Math.random() * 10 + 10;
  spinTime = 0;
  spinTimeTotal = Math.random() * 3 + 4 * 1000;
  rotateWheel();
}

function rotateWheel() {
  spinTime += 30;
  if(spinTime >= spinTimeTotal) {
    stopRotateWheel();
    return;
  }
  var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
  startAngle += (spinAngle * Math.PI / 180);
  drawRouletteWheel();
  spinTimeout = setTimeout('rotateWheel()', 30);
}

function stopRotateWheel() {
  clearTimeout(spinTimeout);
  var degrees = startAngle * 180 / Math.PI + 90;
  var arcd = arc * 180 / Math.PI;
  var index = Math.floor((360 - degrees % 360) / arcd);
  ctx.save();
  ctx.font = 'bold 30px sans-serif';
  var text = restaraunts[index]
  ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
  ctx.restore();
}

function easeOut(t, b, c, d) {
  var ts = (t/=d)*t;
  var tc = ts*t;
  return b+c*(tc + -3*ts + 3*t);
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<canvas id="wheelcanvas" width=600 height=600></canvas>

关于javascript - 如何在canvas html5中使用图像填充样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29130129/

24 4 0
文章推荐： javascript - 仅在单页中运行字符计数 javascript 函数
文章推荐： javascript - CKEditor - 如何检查事件中的文本区域是否为空？
文章推荐： javascript - 在 ReactJS 中捕获事件
文章推荐： javascript - Node JS 的 SQL 外部化(XML 解析)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com