canvas ---1
Canvas1 (关键词:canvas)
- canvas :就是html5中提供的一个标签,只是用来展示绘图的内容
-
- canvas 标签的默认宽高:300*150
-
- 如果给canvas来设置高度和宽度
-
- 一般情况就是html的width 和 height属性
- 通过js来设置宽度和高度
- 不管是通过html的属性(width/height) 还是直接通过DOM来设置(width/height ),属性都是在设置canvas画布中的像素点
- 注意:不要通过css样式属性来设置高度和宽度,因为这里的高度和宽度不是在设置像素点的个数,而是在扩大或者缩小每个像素点的大小
-
- canvas标签IE9及其以上的浏览器才支持
-
- 使用canvas基本步骤:
- 获取canvasDOM元素
- 获取canvas绘图上下文(一系列工具的集合)
- 从上下文中获取到相应的工具(API 或者方法)
// 传入的参数 2d 表示,绘制平面图形
// 如果想要绘制 3d的内容,需要传入: webgl
var ctx = cv.getContext("2d");
// ctx的类型: CanvasRenderingContext2D
-
- 系统的画图工具:
- canvas画布:白色的空白区域
- 上下文:白色的空白区域上部工具栏
-
- 常用的方法:
- .moveTo()----把画笔移动到画布中的某个位置去
- .lineTo() ----在起始点和当前函数提供的坐标之间画一条路径
- .stroke() ----描边,真正的将路径绘制在canvas画布上
- .fill() ---- 填充,填充为一个指定的颜色,如果绘制了一个没有闭合图形,会自动闭合
- .closePath() ---闭合路径
- 闭合路径 与 自己写的连线的区别:
-
- 闭合路径绘制的两条线衔接处更加平滑
- 自己写的连线,只是让开始位置跟结束的位置放到一起,这两者绘制出来的接合处是有区别的
- .beginPath()----开启路径
- 开启路径,只把原来的路径清空了,但是绘制的样式(状态)还会被继承了
- 如果是开启新路径之后,又设置了样式,那么会把之前的样式覆盖
-
- 常用的样式:
- strokeStyle 设置描边的颜色
取值:颜色名称 十六进制 rgba - fillStyle 设置填充的颜色
- lineWidth 设置线的宽度 :如果是奇数的线宽,绘制的时候,会制动加1像素,然后最外面的两个像素颜色会变淡
- strokeStyle 设置描边的颜色
- 如何让lineWidth的宽度为1
-
- (width,height.5)