• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > Html5 Canvas初探学习笔记(2) -绘制深入

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

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含Html5 ,Canvas,绘制深入 等相关知识,匿名希望在学习及工作中可以帮助到您
上一篇基本的介绍了Html5 canvas的基本概念,对于大多数学习使用过j2me和android的画布进行绘图的程序员来说,理解Html5的Canvas并不是难事。本篇就继续上一篇的内容,讲解绘制直线,圆弧等方法。

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



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



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



两段代码的效果如下:



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



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

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



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


以上就是Html5 Canvas初探学习笔记(2) -绘制深入 的内容,更多相关内容请关注微课江湖()!

您可能想查找下面的文章:

  • HTML5的本地存储
  • Define charset for HTML5 Doctype
  • HTML5 canvas如何绘制动态径向渐变
  • 如何使用HTML5 Canvas绘制动态线性渐变
  • HTML5 canvas如何实现马赛克的淡入淡出效果(代码)
  • HTML5 canvas中如何绘制图像
  • 如何使用HTML5 canvas实现图像的马赛克
  • html5 canvas实现简单的双缓冲
  • HTML5 Canvas 图形组合是如何实现的?附代码
  • HTML5 figure标签是什么意思?HTML5 figure标签的使用方法详解

相关文章

  • 2018-12-03用canvas画心电图的示例代码
  • 2018-12-03HTML5中SVG 2D笔画与填充的详细介绍
  • 2018-12-03电子行业中,以0x开头颜色表示法和以#开头的颜色表示法有什么区别?
  • 2018-12-03HTML5中div和section以及article的区别分析
  • 2018-12-03H5响应式建站有什么好处
  • 2018-12-03opengl/webgl 可以部分重绘吗?
  • 2018-12-03HTML5实现动画效果的方式汇总 _html5教程技巧
  • 2018-12-03html5移动页面如何自适应屏幕?html5页面自适应手机屏幕的四种方法
  • 2017-08-06HTML中使用SVG与SVG预定义形状元素介绍
  • 2017-08-06html5配合css3实现带提示文字的输入框(摆脱js)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 详解HTML5中ol标签的用法_html5教程技巧
    • html5+JavaScript进行邮箱地址验证
    • html5离线存储知识详解
    • PHP结合HTML5使用FormData对象提交表单及上传图片
    • 推荐10款飘落动画特效(收藏)
    • html5中audio(音频)的分析
    • HTML5不支持标签和新增标签详解
    • HTML5 IndexedDB本地储存
    • android ios h5 接私活哪个挣钱多?
    • 请问有什么可以代替texturepacker的?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有