在画布HTML 5中创建自定义图标

时间：2017-05-22 07:26:23

标签： html5-canvas

我是画布的新手，我正在尝试绘制自定义形状。我只是不知道这个是否可能？

custom icon

我下面有一个片段，我遇到了第七个画布的问题。有人可以帮我弄这个吗？提前谢谢。

＆＃13;
＆＃13; 
  //player
  var c = document.getElementById('test1');
  /*	c.height = 83;
  	c.width = 83;*/
  var cs = getComputedStyle(c);
  var width = parseInt(cs.getPropertyValue('width'), 10);
  var height = parseInt(cs.getPropertyValue('height'), 10);

  c.width = width;
  c.height = height;
  var cx = c.getContext('2d');
  var centerX = c.width / 2;
  var centerY = c.height / 2;
  var radius = c.height * .35;
  // define the arc path
  cx.beginPath();
  cx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  cx.fillStyle = 'rgba(250,0,0,1)';
  cx.fill();
  cx.closePath()
    //end of player

  //banker
  var c = document.getElementById('test2');
  var cs = getComputedStyle(c);
  var width = parseInt(cs.getPropertyValue('width'), 10);
  var height = parseInt(cs.getPropertyValue('height'), 10);
  c.width = width;
  c.height = height;
  var cx = c.getContext('2d');
  var centerX = c.width / 2;
  var centerY = c.height / 2;
  var radius = c.height * .35;
  // define the arc path
  cx.beginPath();
  cx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  cx.fillStyle = 'rgba(0,0,250,1)';
  cx.fill();
  cx.closePath()
    //end of banker	

  //tie
  var c = document.getElementById('test3');
  var cs = getComputedStyle(c);
  var width = parseInt(cs.getPropertyValue('width'), 10);
  var height = parseInt(cs.getPropertyValue('height'), 10);
  c.width = width;
  c.height = height;
  var cx = c.getContext('2d');
  var centerX = c.width / 2;
  var centerY = c.height / 2;
  var radius = c.height * .35;
  // define the arc path
  cx.beginPath();
  cx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  cx.fillStyle = 'rgba(0,250,0,1)';
  cx.fill();
  cx.closePath()

  //red ring
  var c = document.getElementById('test3');
  var cs = getComputedStyle(c);
  var width = parseInt(cs.getPropertyValue('width'), 10);
  var height = parseInt(cs.getPropertyValue('height'), 10);
  c.width = width;
  c.height = height;
  var cx = c.getContext('2d');
  var centerX = c.width / 2;
  var centerY = c.height / 2;
  var radius = c.height * .30;
  // define the arc path
  cx.beginPath();
  cx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  cx.strokeStyle = 'rgba(250,0,0,1)';
  cx.lineWidth = c.width * .12;
  cx.stroke();
  cx.closePath()

  //blue ring
  var c = document.getElementById('test4');
  var cs = getComputedStyle(c);
  var width = parseInt(cs.getPropertyValue('width'), 10);
  var height = parseInt(cs.getPropertyValue('height'), 10);
  c.width = width;
  c.height = height;
  var cx = c.getContext('2d');
  var centerX = c.width / 2;
  var centerY = c.height / 2;
  var radius = c.height * .30;
  // define the arc path
  cx.beginPath();
  cx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  cx.strokeStyle = 'rgba(0,0,250,1)';
  cx.lineWidth = c.width * .12;
  cx.stroke();
  cx.closePath()
    //end blue-ring


  //tie line
  var c = document.getElementById('test5');
  var cs = getComputedStyle(c);
  var width = parseInt(cs.getPropertyValue('width'), 10);
  var height = parseInt(cs.getPropertyValue('height'), 10);
  c.width = width;
  c.height = height;
  var cx = c.getContext('2d');
  var centerX = c.width / 2;
  var centerY = c.height / 2;
  var radius = c.height * .30;
  // define the line path

  // define the line path
  cx.beginPath()
  cx.moveTo(c.width * .714, c.height * .285);
  cx.lineTo(c.width * .285, c.height * .714);
  cx.lineWidth = c.width * .12;
  cx.lineCap = "round";
  cx.strokeStyle = 'rgba(0,250,0,1)';
  cx.stroke();
  cx.closePath();
  //end tie-line


  //player-tie
  var c = document.getElementById('test6');
  var cs = getComputedStyle(c);
  var width = parseInt(cs.getPropertyValue('width'), 10);
  var height = parseInt(cs.getPropertyValue('height'), 10);
  c.width = width;
  c.height = height;
  var cx = c.getContext('2d');
  var centerX = c.width / 2;
  var centerY = c.height / 2;
  var radius = c.height * .30;
  // define the line path

  // define the line path
  cx.beginPath()
  cx.moveTo(c.width * .714, c.height * .285);
  cx.lineTo(c.width * .285, c.height * .714);
  cx.lineWidth = c.width * .12;
  cx.lineCap = "round";
  cx.strokeStyle = 'rgba(0,250,0,1)';
  cx.stroke();
  cx.closePath();

  // define the arc path
  cx.beginPath();
  cx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  cx.strokeStyle = 'rgba(0,0,250,1)';
  cx.lineWidth = c.width * .12;
  cx.stroke();
  cx.closePath()
    //end player-tie

  //player-banker-pair
  var c = document.getElementById('test7');
  var cs = getComputedStyle(c);
  var width = parseInt(cs.getPropertyValue('width'), 10);
  var height = parseInt(cs.getPropertyValue('height'), 10);

  c.width = width;
  c.height = height;
  var cx = c.getContext('2d');
  var centerX = c.width / 2;
  var centerY = c.height / 2;
  var radius = c.height * .35;
  // define the arc path
  cx.beginPath();
  cx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  cx.fillStyle = 'rgba(0,0,250,1)';
  cx.fill();
  cx.closePath()

  //pair invisible circle
  radius = c.height * .12;
  // define the arc path
  cx.beginPath();
  cx.arc(c.width * .275, c.height * .275, radius, 0, 2 * Math.PI, false);
  cx.fillStyle = 'rgba(250,0,0,0)';
  cx.fill();
  cx.globalCompositeOperation = "destination-out";
  cx.closePath()

  //pair circle
  // define the arc path
  radius = c.height * .10;
  cx.beginPath();
  cx.arc(c.width * .275, c.height * .275, radius, 0, 2 * Math.PI, false);
  cx.fillStyle = 'rgba(250,0,0,1)';
  /*cx.globalCompositeOperation = "destination-out";	*/
  cx.fill();
  cx.closePath()



  //end player-banker-pair
＆＃13; 
	canvas {
	  width: 100px;
	  height: 100px;
	  background: rgba(0, 0, 0, 0.2);
	}
＆＃13; 
<canvas id="test1"></canvas>
<canvas id="test2"></canvas>
<canvas id="test3"></canvas>
<canvas id="test4"></canvas>
<canvas id="test5"></canvas>
<canvas id="test6"></canvas>
<canvas id="test7"></canvas>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

以下是如何实现这一目标......

＆＃13;
＆＃13; 
//player
var c = document.getElementById('test1');
/*	c.height = 83;
	c.width = 83;*/
var cs = getComputedStyle(c);
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);

c.width = width;
c.height = height;
var cx = c.getContext('2d');
var centerX = c.width / 2;
var centerY = c.height / 2;
var radius = c.height * .35;
// define the arc path
cx.beginPath();
cx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
cx.fillStyle = 'rgba(250,0,0,1)';
cx.fill();

//end of player

//banker
var c = document.getElementById('test2');
var cs = getComputedStyle(c);
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);
c.width = width;
c.height = height;
var cx = c.getContext('2d');
var centerX = c.width / 2;
var centerY = c.height / 2;
var radius = c.height * .35;
// define the arc path
cx.beginPath();
cx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
cx.fillStyle = 'rgba(0,0,250,1)';
cx.fill();

//end of banker	

//tie
var c = document.getElementById('test3');
var cs = getComputedStyle(c);
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);
c.width = width;
c.height = height;
var cx = c.getContext('2d');
var centerX = c.width / 2;
var centerY = c.height / 2;
var radius = c.height * .35;
// define the arc path
cx.beginPath();
cx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
cx.fillStyle = 'rgba(0,250,0,1)';
cx.fill();


//red ring
var c = document.getElementById('test3');
var cs = getComputedStyle(c);
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);
c.width = width;
c.height = height;
var cx = c.getContext('2d');
var centerX = c.width / 2;
var centerY = c.height / 2;
var radius = c.height * .30;
// define the arc path
cx.beginPath();
cx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
cx.strokeStyle = 'rgba(250,0,0,1)';
cx.lineWidth = c.width * .12;
cx.stroke();


//blue ring
var c = document.getElementById('test4');
var cs = getComputedStyle(c);
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);
c.width = width;
c.height = height;
var cx = c.getContext('2d');
var centerX = c.width / 2;
var centerY = c.height / 2;
var radius = c.height * .30;
// define the arc path
cx.beginPath();
cx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
cx.strokeStyle = 'rgba(0,0,250,1)';
cx.lineWidth = c.width * .12;
cx.stroke();

//end blue-ring


//tie line
var c = document.getElementById('test5');
var cs = getComputedStyle(c);
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);
c.width = width;
c.height = height;
var cx = c.getContext('2d');
var centerX = c.width / 2;
var centerY = c.height / 2;
var radius = c.height * .30;
// define the line path

// define the line path
cx.beginPath()
cx.moveTo(c.width * .714, c.height * .285);
cx.lineTo(c.width * .285, c.height * .714);
cx.lineWidth = c.width * .12;
cx.lineCap = "round";
cx.strokeStyle = 'rgba(0,250,0,1)';
cx.stroke();

//end tie-line


//player-tie
var c = document.getElementById('test6');
var cs = getComputedStyle(c);
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);
c.width = width;
c.height = height;
var cx = c.getContext('2d');
var centerX = c.width / 2;
var centerY = c.height / 2;
var radius = c.height * .30;
// define the line path

// define the line path
cx.beginPath()
cx.moveTo(c.width * .714, c.height * .285);
cx.lineTo(c.width * .285, c.height * .714);
cx.lineWidth = c.width * .12;
cx.lineCap = "round";
cx.strokeStyle = 'rgba(0,250,0,1)';
cx.stroke();


// define the arc path
cx.beginPath();
cx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
cx.strokeStyle = 'rgba(0,0,250,1)';
cx.lineWidth = c.width * .12;
cx.stroke();

//end player-tie

//player-banker-pair
var c = document.getElementById('test7');
var cs = getComputedStyle(c);
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);

c.width = width;
c.height = height;
var cx = c.getContext('2d');
var centerX = c.width / 2;
var centerY = c.height / 2;
var radius = c.height * .35;
// define the arc path
cx.beginPath();
cx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
cx.fillStyle = 'rgba(0,0,250,1)';
cx.fill();


//pair invisible circle
radius = c.height * .12;
// define the arc path
cx.beginPath();
cx.arc(c.width * .275, c.height * .275, radius, 0, 2 * Math.PI, false);
cx.globalCompositeOperation = "destination-out"; //switched position
cx.fillStyle = 'rgba(250,0,0,1)'; //modified
cx.fill();



//pair circle
// define the arc path
radius = c.height * .10;
cx.beginPath();
cx.arc(c.width * .275, c.height * .275, radius - 2, 0, 2 * Math.PI, false);
cx.fillStyle = 'rgba(250,0,0,1)';
cx.globalCompositeOperation = "source-over"; //added
cx.fill();
＆＃13; 
canvas {
  width: 100px;
  height: 100px;
  background: rgba(0, 0, 0, 0.2);
}
＆＃13; 
<canvas id="test1"></canvas>
<canvas id="test2"></canvas>
<canvas id="test3"></canvas>
<canvas id="test4"></canvas>
<canvas id="test5"></canvas>
<canvas id="test6"></canvas>
<canvas id="test7"></canvas>
＆＃13;
＆＃13;
＆＃13;

道歉没有给出任何解释

相关问题
最新问题