canvas教程

canvas知识总结(3)

字号+ 作者:H5之家 来源:H5之家 2017-05-31 08:00 我要评论( )

!DOCTYPE htmlhtml lang="en"head meta charset="utf-8" title/title link href="http://r01.uzaicdn.com/content/v1/styles/subject.css" link href="styles/lianxi.css" script src="http://r01.uzaicdn.com/cont

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> <link href="styles/lianxi.css"> <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="scripts/lianxi.js"></script> <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]--> <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]--> <style type="text/css"> canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;} </style> <script> window.onload=function(){ function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.width=500; canvas.height=500; var img=new Image(); img.src='http://www.h5cn.com/upload8/allimg/170531/0P12I1P_0.jpg' img.onload=function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } }else{ alert('当前浏览器不支持,请更换浏览器'); } } draw(); } </script> </head> <body> <canvas>当前浏览器不支持,请更换浏览器</canvas> </body> </html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

 

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

相关文章
  • canvas转存为图片实例教程

    canvas转存为图片实例教程

    2017-05-30 18:06

  • Html5 canvas 钟表

    Html5 canvas 钟表

    2017-05-30 11:03

  • 如何用HTML5 CANVAS绘制阴影和填充模式

    如何用HTML5 CANVAS绘制阴影和填充模式

    2017-05-29 18:05

  • 使用Canvas对图像进行处理

    使用Canvas对图像进行处理

    2017-05-29 15:00

网友点评