Rumah > hujung hadapan web > Tutorial H5 > 使用HTML5画布(canvas)生成阴影效果

使用HTML5画布(canvas)生成阴影效果

PHP中文网
Lepaskan: 2017-03-30 14:20:04
asal
2416 orang telah melayarinya


1144.jpg



使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影。

      代码:

  var canvas = document.getElementById('shadowcanvas');
  var ctx = canvas.getContext('2d');
  ctx.save();
  ctx.fillStyle = '#EB852A'; 
  ctx.shadowOffsetX = 15; // 阴影Y轴偏移
  ctx.shadowOffsetY = 15; // 阴影X轴偏移
  ctx.shadowBlur = 14; // 模糊尺寸
  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 颜色
  ctx.beginPath(); 
  ctx.arc(150, 150, 75, 0, 2 * Math.PI, false); 
  ctx.fill();
  ctx.restore(); 
  ctx.fillStyle = '#222222'; 
  ctx.beginPath(); 
  ctx.arc(350, 150, 75, 0, 2 * Math.PI, false); 
  ctx.fill();
Salin selepas log masuk

      这段代码中,我们首先得到画布并取得context,调用方法添加阴影相关属性,包括了偏移,模糊和阴影颜色。最后调用canvas方法生成图形,这里我们为了更好的对比效果,分别生成了2个圆形,一个包含阴影,一个不包含阴影。

      注意:以上阴影属性,至少得设置颜色和模糊度。

      运行代码:

      GBdebug在线调试地址:www.gbin1.com/gb/debug/5b6fd9cb-6bdf-4a7f-8f20-4ea73bf9ae76.htm

以上就是使用HTML5画布(canvas)生成阴影效果的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan