堆棧內存溢出
  簡體   English   中英

如何在畫布HTML5中使用圖片填充樣式

[英]How to fillstyle with Images in canvas html5

 原文  2015-03-18 18:38:33  8   2    javascript/ html5/ canvas

問題描述

我正在使用這個旋轉輪

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

我想將背景色更改為背景圖像。 我不知道如何去做。 如果有人友好地向我展示了將圖像添加到畫布形狀/元素的路徑。 我知道這與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>

這是空轉輪的預覽。 我想在每個圖像上放置不同的圖像。 旋轉輪圖像

2 個解決方案

解決方案1
 3 已采納  2015-03-18 19:43:54

您可以使用context.pattern創建用於填充車輪的模式：

在此處輸入圖片說明

 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>

解決方案2
 -2  2015-03-18 20:09:34

下面是示例代碼 

function drawing(){
    var c = document.getElementById("canvas");
    var context = c.getContext("2d");
    var image = new Image();
    image.src = 'http://www.thesstech.com/sites/all/themes/mystique_theme/images/wallpape...';
    context.drawImage(image,100,100);
}
<canvas id ="canvas" width="300" height="300">
   <p>Your browser have no support for canvas</p>
</canvas>

主要教程位於： http : //www.thesstech.com/html5/canvas

閱讀部分：

如何在HTML5畫布中填充圖像

從示例http://www.thesstech.com/tryme?filename=image復制的代碼

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 HTML5 canvas“重置”fillStyle 仔細看看HTML5 Canvas fillStyle html5畫布上下文.fillStyle不起作用 （HTML5畫布）Fillstyle img不隨我的地形路徑移動 如何在 HTML5 Canvas 上翻轉和旋轉圖像 HTML5 Canvas如何生成多個圖像 如何將重疊圖像放在 html5 畫布上？ 每次在HTML5 Canvas中的.fillStyle中使用畫布模式時，將其隨機分配為不同的顏色 圖像未加載到html5畫布中 在HTML5畫布上繪制圖像
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM