HTML5——Canvas_06之【绘制变形图形】

最新推荐文章于 2022-06-13 14:42:30 发布

Superstatus

最新推荐文章于 2022-06-13 14:42:30 发布

阅读量309

点赞数

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

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

版权

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"); 
 
 
  context. 
  fillStyle= 
  "eeeeef"; 
 
 
  context. 
  fillRext( 
  0, 
  0, 
  500, 
  500); 
 
 
  content. 
  translate( 
  200, 
  50); 
  //变形 
 
 
  context. 
  fillStyle= 
  "rgba(255,0,0,0.25)"; 
 
 
  for( 
  var 
  i<0; 
  i< 
  50; 
  i++) 
 

   { 
 
 
  content. 
  translate( 
  25, 
  25); 
 
 
  context. 
  scale( 
  0.95, 
  0.95); 
 
 
  context. 
  rotate( 
  Math.PI/ 
  10); 
 
 
  content. 
  fillRext( 
  0, 
  0, 
  100, 
  50); 
 

   } 
 


   } 
 
 
  </ 
  script 
  > 
 
 
 
 
 
 
  </ 
  head 
  > 
 

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

 
  </ 
  html 
  > 
 

Superstatus

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5——Canvas_06之【绘制变形图形】

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; ch
复制链接

扫一扫

专栏目录