canvas教程

html5学习笔记6 canvas

字号+ 作者:H5之家 来源:H5之家 2017-08-14 09:45 我要评论( )

html5学习笔记6 canvas

绘制普通直线,先看效果图:

html5学习笔记6 canvas0

实现代码如下:

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function drawGraph(id) { var canvas=document.getElementById(id); var context=canvas.getContext("2d"); context.fillStyle="#CC00FF" //最外层canvas颜色 context.fillRect(0,0,300,300)//最外层canvas区域 context.beginPath() context.fillStyle="#008B8B"//填充颜色 context.strokeStyle="#FFFF00"//线的颜色 var dx=150 var dy=150 var s=100 var dig=Math.PI/15*11 for(var i=0;i<30;i++) { var x=Math.sin(i*dig) var y=Math.cos(i*dig) context.lineTo(dx+x*s,dy+y*s) } context.closePath()//关闭路径 context.fill()//填充颜色 context.stroke() } </script> </head> <body onload="drawGraph('canvasId')"> <canvas id="canvasId" width="300" height="400"></canvas> </body> </html>

 绘制贝塞尔曲线

效果图如下:

html5学习笔记6 canvas1

代码如下:

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function drawGraph(id) { var canvas=document.getElementById(id); var context=canvas.getContext("2d"); context.fillStyle="#CC00FF" context.fillRect(0,0,300,300) context.beginPath() context.fillStyle="#008B8B" context.strokeStyle="#FFFF00" var dx=150 var dy=150 var s=100 var dig=Math.PI/15*11 context.moveTo(dx,dy) for(var i=0;i<60;i++) { var x=Math.sin(i*dig) var y=Math.cos(i*dig) context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s)//贝塞尔绘制函数 } context.closePath() context.fill() context.stroke() } </script> </head> <body onload="drawGraph('canvasId')"> <canvas id="canvasId" width="300" height="400"></canvas> </body> </html>

 

     关于了解的html5的基本知识点就到这里了,毕竟项目中没有去使用,出于个人闲来无事有个大体了解.并且都很基本,其实这些基本的知识点感觉没必要花费这么多精力去关注,这个时间个人感觉花的太多,完全可以找个小demo去研究,这样驱动的去学习效果会更好,先到这里了,准备投入到下一阶段其他开发知识点的学习中.

 

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

相关文章
  • html5教程_教你使用HTML5画布(canvas)生成阴影效果

    html5教程_教你使用HTML5画布(canvas)生成阴影效果

    2017-08-14 12:05

  • Canvas学习2:Canvas里的坐标系统 Rockyxia Web技术博客

    Canvas学习2:Canvas里的坐标系统 Rockyxia Web技术博客

    2017-08-13 15:03

  • 设计技巧 设计手法 设计教程 设计实例 OpenCanvas3和数码板手绘

    设计技巧 设计手法 设计教程 设计实例 OpenCanvas3和数码板手绘

    2017-08-13 14:02

  • canvas版实现画图、虚线、辅助线、线条颜色、线条宽度.doc

    canvas版实现画图、虚线、辅助线、线条颜色、线条宽度.doc

    2017-08-13 10:00

网友点评
>