全国服务热线:4008-888-888

技术知识

HTML5 canvas基础制图之绘图黑影实际效果

<canvas></canvas>是HTML5中新增的标识,用于绘图图型,具体上,这个标识和别的的标识1样,其独特的地方在于该标识能够获得1个CanvasRenderingContext2D目标,大家能够根据JavaScript脚本制作来操纵该目标开展制图

<canvas></canvas>只是1个绘图图型的器皿,除id、class、style等特性外,也有height和width特性。在<canvas>>元素上制图关键有3步:

1.获得<canvas>元素对应的DOM目标,这是1个Canvas目标;
2.启用Canvas目标的getContext()方式,获得1个CanvasRenderingContext2D目标;
3.启用CanvasRenderingContext2D目标开展制图。

黑影绘图

  • shadowColor 设定或回到用于黑影的色调。
  • shadowBlur 设定或回到用于黑影的模糊不清级別(标值越大越模糊不清)。
  • shadowOffsetX 设定或回到黑影与样子的水平间距。
  • shadowOffsetY 设定或回到黑影与样子的竖直间距。

大家为以前绘图的5角星加上1下黑影

JavaScript Code拷贝內容到剪贴板
  1. var canvas = document.getElementById("canvas");   
  2.    var context = canvas.getContext("2d");   
  3.    context.beginPath();   
  4.    //设定是个端点的座标,依据端点制订相对路径   
  5.    for (var i = 0; i < 5; i++) {   
  6.        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,   
  7.                        -Math.sin((18+i*72)/180*Math.PI)*200+200);   
  8.        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,   
  9.                        -Math.sin((54+i*72)/180*Math.PI)*80+200);   
  10.    }   
  11.    context.closePath();   
  12.    //设定边框款式和填充色调   
  13.    context.lineWidth="3";   
  14.    context.fillStyle = "#F6F152";   
  15.    context.strokeStyle = "#F5270B";   
  16.    context.shadowColor = "#F7F2B4";   
  17.    context.shadowOffsetX = 30;   
  18.    context.shadowOffsetY = 30;   
  19.    context.shadowBlur = 2;   
  20.    context.fill();   
  21.    context.stroke();   

实际效果以下:

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服