canvas教程

SVG和Canvas的使用(7)

字号+ 作者:H5之家 来源:H5之家 2016-02-06 10:08 我要评论( )

HTML svg width= 120 height= 120 circle cx= 60 cy= 60 r= 25 stroke= green id= MyCircle stroke-width= 8 fill= yellow onmouseover= IncreaseSize(); onmouseout= DecreaseSize(); //svg input type= button va

HTML

<svg width="120" height="120"> <circle cx="60" cy="60" r="25" stroke="green" id="MyCircle" stroke-width="8" fill="yellow" onmouseover="IncreaseSize();" onmouseout="DecreaseSize();" /> </svg> <input type="button" value="+" onclick="ChangeSize();">

JavaScript

<script type="text/javascript"> function IncreaseSize () { document.getElementById("MyCircle").r.baseVal.value=50; } function DecreaseSize() { document.getElementById("MyCircle").r.baseVal.value = 25; } </script> 输出

  • 支持图片保存
  • Canvas 最后可输出为图像,可使用浏览器默认的选项将图像保存。而SVG 不支持。

      下一章将要学习什么?

    作者:powertoolsteam 发表于2016/2/4 9:27:57 原文链接

    阅读:90 评论:0

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • canvas的神奇用法 javascript技巧笔记 CFEI.NET

      canvas的神奇用法 javascript技巧笔记 CFEI.NET

      2017-04-30 12:00

    • Canvas学习:绘制虚线和圆点线

      Canvas学习:绘制虚线和圆点线

      2017-04-25 15:01

    • Canvas学习:绘制矩形

      Canvas学习:绘制矩形

      2017-04-24 17:02

    • npm install canvas简明指南

      npm install canvas简明指南

      2017-04-23 18:02

    网友点评
    i