HTML5——Canvas_04之【绘制渐变图形】

最新推荐文章于 2022-07-16 16:46:33 发布

Superstatus

最新推荐文章于 2022-07-16 16:46:33 发布

阅读量225

点赞数

分类专栏： Html5 Canvas 文章标签： Canvas

本文链接：https://blog.csdn.net/Superstatus/article/details/80566095

版权

Html5 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Canvas

9 篇文章 0 订阅

订阅专栏

 
  <!DOCTYPE HTML PUBLIC 
  "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd" 
  > 
 
 
  < 
  html 
  > 
 

 
  < 
  head 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "Content-Type" 
  content= 
  "text/html; charset=utf-8" 
  > 
 
 
  < 
  title 
  >绘制渐变图形 
  </ 
  title 
  > 
 
 
 
 
  < 
  script 
  > 
 
 
  function 
  draw( 
  id){ 
 
 
  var 
  canvas= 
  document. 
  getElementById( 
  id); 
 
 
  var 
  context= 
  canvas. 
  getContext( 
  "2d"); 
 
 
  var 
  g1= 
  context. 
  createLinearGradient( 
  0, 
  0, 
  0, 
  300); 
 
 
  g1. 
  addColorStop( 
  0, 
  "rgb(255,255,0)"); 
  //开始的颜色 
 
 
  g1. 
  addColorStop( 
  1, 
  "rgb(0,255,255)"); 
  //结束的颜色 
 
 
  content. 
  fillStyle= 
  g1; 
  //填充颜色 
 
 
  content. 
  fillRect( 
  0, 
  0, 
  500, 
  500); 
 
 
  //以上绘制矩形 渐变 
 
 
  //以下绘制圆形渐变 
 
 
  var 
  g2= 
  context. 
  createLinearGradient( 
  0, 
  0, 
  300, 
  0); 
 
 
  g2. 
  addColorStop( 
  0, 
  "rgba(0,0,255,0.5)"); 
 
 
  g2. 
  addColorStop( 
  1, 
  "rgba(255,0,0,0.5)"); 
 
 
  for( 
  var 
  i= 
  0; 
  i< 
  10; 
  i++){ 
 
 
  content. 
  beginPath(); 
 
 
  context. 
  fillStyle= 
  g2; 
 
 
  context. 
  arc( 
  i* 
  25, 
  i* 
  25, 
  i* 
  10, 
  0, 
  Math.PI* 
  2, 
  true); 
  //圆形 
 
 
  context. 
  close(); 
 
 
  context. 
  fill(); 
 


   } 
 


   } 
 
 
  </ 
  script 
  > 
 
 
 
 
 
 
  </ 
  head 
  > 
 

 
  < 
  body 
  onload= 
  "draw(" 
  canvas 
  ");" 
  > 
 
 
  < 
  canvas 
  id= 
  "canvas" 
  width= 
  "500" 
  height= 
  "500" 
  ></ 
  canvas 
  > 
 
 
  </ 
  body 
  > 
 

 
  </ 
  html 
  > 
 