文档章节

canvas学习第一天

彬bin
 彬bin
发布于 2017/06/27 19:18
字数 450
阅读 3
收藏 0

canvas简介

###什么是canvas canvas是一个html标签,但是给js提供了借口,通过js代码可以在canvas元素上画图

canvas的应用

  • 游戏
  • 炫酷效果、banner(主要)
  • 报表,可视化数据(主要)
  • 地图
  • 图形编辑器、模拟器

canvas 基础

canvas 元素

属性(只有这两个)
  • width
  • height
方法
  • getContext() 获取绘图环境(画布) 参数2d,webgl

绘图环境2d

  • 坐标 x坐标 y坐标
  • 原点 左上角

canvas 基本绘画

路径开始和闭合

  • beginPath() 开启新的路径(状态)并且结束前面的路径
  • closePath() 结束当前路径 并且是当前路径闭合

线

  • moveTo(x,y) 起始点坐标
  • lineTo(x,y) 绘制直线(接着上一个点)

快速矩形工具

  • rect(x, y, width, height) 绘制矩形的路径
  • strokeRect(x, y, width, height) 绘制描边的矩形
  • fillStyle(x, y, width, height) 绘制填充的矩形
  • clearRect(x, y, width, height) 清除矩形(绘制的矩形区域内的内容将被擦除)

画图(弧)

  • arc(x, y, r, start, end, true/false) 最后一个参数是表示 顺时针(false)还是逆时针(true)默认是false

文字

  • font 属性 设置加粗、大小和字体
  • textAlign 属性 文字的水平对齐方式 start(默认)/end/left/right/center
  • textBaseLine 属性 文字的垂直对齐方式 alphabetic(默认)/top/bottom/middle
  • fillText(text, x, y) 填充文字
  • strokeText(text, x, y) 描边文字
  • measureText(text) 返回改文本在画布中所占的宽度

描边

  • stroke() 填充当前路径
  • strokeStyle 属性 设置描边颜色
  • lineWidth 属性 设置描边线条宽度

填充

  • fill() 填充当前的路径
  • fillStyle 属性 设置填充的颜色
  • 注意: 非0环绕的算法

清除画布

  • 使用 clearRect()
  • 重新设置 canvas的宽度 canvas.width=canvas.width

© 著作权归作者所有

上一篇: canvas学习第二天
下一篇: juery ajax
彬bin
粉丝 0
博文 4
码字总数 4061
作品 0
私信 提问
三天学会HTML5——SVG和Canvas的使用

在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容。 第2天将学习如何使用Canvas 和...

葡萄城控件技术团队
2016/02/04
224
0
Silverlight 解谜游戏 之一 新建项目

2010年第一天,首先祝福博客园的朋友们在新的一年一切顺利、心想事成!本系列将通过Blend 3制作一个“Hidden Object” 解密游戏教程,这类游戏国外做的比较多,是根据一个写着英文单词的题板...

junwong
2012/03/09
78
0
【备忘】2017传智播客14期web前端与移动开发基础+就业班全套无加密

2017传智播客14期web前端与移动开发基础+就业班全套无加密 传智播客14期web前端与移动开发基础+就业班全套教程无加密 课程介绍 本教程是实战派课程!为传智最新web前端,结束日期为2016年12月...

qq_38155396
2017/06/30
0
0
python教程,python入门教程

给大家整理的这套python学习路线图,按照此教程一步步的学习来,肯定会对python有更深刻的认识。或许可以喜欢上python这个易学,精简,开源的语言。此套教程,不但有视频教程,还有源码分享,...

溪水中
2017/07/21
0
0
Linux入门---创建新用户

今天开始入门学习Linux系统。 系统安装在公司一台虚拟服务器中,有做NAT便于在家和公司学习。 第一天,学习了如何使用useradd创建普通用户,利用passwd为新用户创建密码 例如:useradd zhang...

hml988
2016/07/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

抽离css以及公共js

分离css 分离css:为何要把 CSS 文件分离出来,而不是直接一起打包在 JS 中。最主要的原因是我们希望更好地利用缓存。 extract-text-webpack-plugin > 1. 假设我们原本页面的静态资源都打包成...

莫西摩西
41分钟前
1
0
面向对象的7大原则

https://blog.csdn.net/u010355144/article/details/44940171

南桥北木
59分钟前
2
0
Jenkins的配置从节点中默认没有Launch agent via Java Web Start,该如何配置使用

Jenkins的配置从节点中默认没有Launch agent via Java Web Start,如下图所示,而这种启动方式在Windows上是最方便的。 如何设置才能让出来呢? 1:打开"系统管理"——"Configure Global Sec...

shzwork
今天
2
0
BAT面试必问HashMap源码分析

HashMap 简介 HashMap 主要用来存放键值对,它基于哈希表的Map接口实现,是常用的Java集合之一。 JDK1.8 之前 HashMap 由 数组+链表 组成的,数组是 HashMap 的主体,链表则是主要为了解决哈...

别打我会飞
今天
10
0
RISC-V双周简报0x1f:一晚上写个RISC-V处理器玩玩(2018-09-01)

https://cnrv.io/bi-week-rpts/2018-09-01 https://blog.csdn.net/zoomdy/article/details/82914730...

whoisliang
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部