HTML5——Canvas_07之【图形组合】

最新推荐文章于 2022-11-02 13:39:08 发布

Superstatus

最新推荐文章于 2022-11-02 13:39:08 发布

阅读量254

点赞数

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

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

版权

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); 
 
  if( 
  canvas== 
  null) 
 
   { 
 
  return 
  false; 
 
   } 
 
  var 
  context= 
  canvas. 
  getContext( 
  "2d"); 
 
  //重点 
 
  var 
  oprtns= 
  new 
  Array( 
 
  "source-atop", 
 
  "source-in", 
 
  "source-out", 
 
  "source-over", 
 
  "destination-atop", 
 
  "destination-in", 
 
  "destination-out", 
 
  "destination-over", 
 
  "lighter", 
 
  "copy", 
 
  "xor" 
 
   ); 
 
  i= 
  8; 
 
  //矩形 
 
  content. 
  fillStyle= 
  "blue"; 
 
  content. 
  fillRext( 
  10, 
  10, 
  60, 
  60); 
 
  content. 
  globalCompositeOperation= 
  oprtns[ 
  i]; 
  //重叠位置 
 
  content. 
  beginPath(); 
 
  //圆形 
 
  content. 
  fillStyle 
  "red"; 
 
  content. 
  arc( 
  60, 
  60, 
  30, 
  Math.PI* 
  2, 
  false); 
 
  content. 
  fill(); 
 
   } 
 
  </ 
  script 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  onload= 
  "draw(" 
  canvas 
  ");" 
  > 
 
  < 
  canvas 
  id= 
  "canvas" 
  width= 
  "500" 
  height= 
  "500" 
  ></ 
  canvas 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >