Html5 Canvas初探学习笔记(2) -绘制深入

宜家博客
宜家博客
宜家博客
39698
文章
0
评论
2019年8月8日13:29:35 评论 108 730字阅读2分26秒

上一篇基本的介绍了
Html5 canvas
的基本概念,对于大多数学习使用过
j2me

android
的画布进行绘图的程序员来说,理解
Html5

Canvas
并不是难事。本篇就继续上一篇的内容,讲解绘制直线,圆弧等方法。

首先讲解绘制直线,请见如下代码:

Html5 Canvas初探学习笔记(2) -绘制深入

这里使用了beginPathclosePath这两个方法,分别表示开始路径和结束路径,中间是路径的各个节点,moveTo的参数是起点坐标,lineTo的参数时所画线段的终点。这样我们完成了一段路径,但注意,我们并没有完成绘制,重点在之后那句,stroke是空心绘制,fill是实心填充。需要注意的是,对于线段来讲,使用fill不会由任何效果。使用beginPathclosePathmoveTolineTo这几个函数不只可以画直线,还可以画出三角形和矩形,首先是花三角形的代码:

Html5 Canvas初探学习笔记(2) -绘制深入

这段代码会把三个点连起来,形成三角形,下面的代码会把四个点连起来形成四边形:

Html5 Canvas初探学习笔记(2) -绘制深入

两段代码的效果如下:

Html5 Canvas初探学习笔记(2) -绘制深入

下面是画出圆弧的方法的代码:

Html5 Canvas初探学习笔记(2) -绘制深入

其他的地方和上面没什么不同,关键是arc函数的参数,分别为,圆心横坐标,圆心纵坐标,圆的半径,起始角度(弧度制),所画圆弧角度(弧度制),最后一个布尔型参数如果是false,则是顺时针,true则为逆时针,起始角度为起始边和水平的夹角,主意,起始边是绕水平位置顺时针旋转。

context.arc(400,100,60,Math.PI/18,Math.PI,false);的效果:

Html5 Canvas初探学习笔记(2) -绘制深入

context.arc(400,100,60,Math.PI/18,Math.PI,true);的效果:

Html5 Canvas初探学习笔记(2) -绘制深入

以上就是Html5 Canvas初探学习笔记(2) -绘制深入 的内容,更多相关内容请关注PHP中文网(www.php.cn)!

weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
宜家博客
HTML5 canvas平铺的代码详解 H5教程

HTML5 canvas平铺的代码详解

最近在做个网站项目,用到很多canvas,有个需求是drawImage把图片画在canvas里面,图片比较小,需要平铺效果,当背景图。PS(背景图高宽10px,需要画的画布高宽200px) 由于一开始...
H5页面在iPhoneX显示的适配问题 H5教程

H5页面在iPhoneX显示的适配问题

这次给大家带来H5页面在iPhoneX显示的适配问题,H5页面在iPhoneX显示适配的注意事项有哪些,下面就是实战案例,一起来看一下。 1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: