在畫布中創建自定義圖標HTML 5

我只是對畫布新手而已，我正在嘗試繪製自定義形狀。我只是不知道這是否可能？在畫布中創建自定義圖標HTML 5

下面我有一個片段，我有與第七帆布問題。有人可以幫我弄這個嗎？提前致謝。

//player 
 
    var c = document.getElementById('test1'); 
 
    /* \t c.height = 83; 
 
    \t 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 \t 
 

 
    //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"; \t */ 
 
    cx.fill(); 
 
    cx.closePath() 
 

 

 

 
    //end player-banker-pair

\t canvas { 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t background: rgba(0, 0, 0, 0.2); 
 
\t }

<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>

來源

2017-05-22 Vinz

這裏是如何可以實現......

//player 
 
var c = document.getElementById('test1'); 
 
/* \t c.height = 83; 
 
\t 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 \t 
 

 
//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();

canvas { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: rgba(0, 0, 0, 0.2); 
 
}

<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>

^{道歉不作任何解釋}

來源

2017-05-22 08:26:35

在畫布中創建自定義圖標HTML 5

回答

相關問題