canvas给图形添加颜色

Posted 2021-02-08 ye-hcj

canvas给图形添加颜色

1. 合法属性

   ctx.fillStyle = ‘orange‘;
   ctx.fillStyle = ‘#FFA500‘;
   ctx.fillStyle = ‘rgb(255, 165, 0)‘;
   ctx.fillStyle = ‘rgba(255, 165, 0, 1)‘;
   
   strokeStyle类似
   
   ctx.globalAlpha = 0.2; 设置全局透明度

2. 给图形上色

   

   const canvas = document.getElementById(‘canvas‘);
   const ctx = canvas.getContext(‘2d‘);
   
   ctx.fillStyle=‘orange‘;
   ctx.fillRect(25, 25, 100, 100);
   
   ctx.fillStyle=‘blue‘;
   ctx.fillRect(125, 25, 100, 100);
   
   ctx.fillStyle=‘green‘;
   ctx.fillRect(25, 125, 100, 100);
   
   ctx.fillStyle=‘red‘;
   ctx.fillRect(125, 125, 100, 100);

3. 给图形边框上色

   

   ctx.strokeStyle=‘rgb(255, 165, 0)‘;
   ctx.beginPath();
   ctx.arc(200, 200, 50, 0, (Math.PI/180)*360, true);
   ctx.stroke();

4. 绘制半透明图形

   

   ctx.fillStyle=‘rgb(255, 165, 0)‘;
   ctx.beginPath();
   ctx.arc(200, 200, 50, 0, (Math.PI/180)*360, true);
   ctx.fill();
   
   ctx.globalAlpha = 0.2;
   
   ctx.fillStyle=‘white‘
   ctx.beginPath();
   ctx.arc(200, 200, 10, 0, Math.PI * 2, true);
   ctx.fill();
   
   ctx.beginPath();
   ctx.arc(200, 200, 20, 0, Math.PI * 2, true);
   ctx.fill();
   
   ctx.beginPath();
   ctx.arc(200, 200, 30, 0, Math.PI * 2, true);
   ctx.fill();