HTML5 canvas基础制图之绘图5角星

2021-02-24 05:58 jianzhan

<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目标开展制图。

根据对5角星剖析,大家能够明确各个端点座标的规律性,这里必须留意的1点是:在canvas中,Y轴的方位是向下的。

相应编码以下:

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.fill();   
  17.     context.stroke();   
  18.   

最终实际效果:

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