canvas教程

html5 canvas简单的直线路径

字号+ 作者:H5之家 来源:H5之家 2016-01-17 10:46 我要评论( )

本文为大家讲解的是html5 canvas简单的直线路径示例,感兴趣的同学参考下。

示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单直线路径</title> <script src="js/modernizr.js"></script> </head> <body> <script type="text/javascript"> window.addEventListener(‘load‘,eventWindowLoaded,false); function eventWindowLoaded(){ canvasApp(); } function canvasSupport(){ return Modernizr.canvas; } function canvasApp(){ if(!canvasSupport()){ return; }else{ var theCanvas = document.getElementById(‘canvas‘) var context = theCanvas.getContext("2d") } drawScreen(); function drawScreen(){ context.strokeStyle=‘#ff00ff‘ context.lineWidth=10; context.lineGap=‘square‘; context.beginPath(); context.moveTo(20,0); context.lineTo(100,0); context.stroke(); context.closePath(); } } </script> <canvas> 你的浏览器无法使用canvas 如有疑问加QQ:1035417613;小白童鞋;你的支持是我最大的快乐!! </canvas> </body> </html>

 

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

相关文章
  • Html5 canvas 基础API

    Html5 canvas 基础API

    2016-02-15 10:01

  • fillRect()

    fillRect()

    2016-02-12 16:18

  • HTML5 Canvas 3D应用实验

    HTML5 Canvas 3D应用实验

    2016-02-11 14:00

  • html5 canvas绘制多个图形的七巧板代码

    html5 canvas绘制多个图形的七巧板代码

    2016-02-11 13:00

网友点评