Canvas基础
前言
一放暑假本来要好好学习的,万万没想到跟基友打守望先锋根本停不下来,导致日夜颠倒。
都是暴雪的错!所幸历时十几天,今天终于调整回来,继续当一名爱学习的宝宝。
正片开始
首先获取到canvas节点后还需获取canvas的上下文环境
context = canvas.getContext(‘2d’)
moveTo与lineTo
moveTo(x, y) 移动画笔到某个位置
lineTo(x, y) 从当前位置到指定位置画一条直线
stroke()
指定好绘制的状态后,调用context.stroke()将状态绘制出来
strokeStyle = 'blue' 属性可以制定颜色
beginPath()
Canvas的绘制是基于状态的,每次调用stroke(),都会将所有的状态绘制一遍
也就是说,后面新加的状态会覆盖前面的。
如果要指明两个不同的绘制过程,需要调用context.beginPath(),表示这是一个
新状态的开始。
当刚刚调用beginPath()时,这时画笔的初始位置为‘无’,注意,‘无’并不是
指位置为(0,0),而是‘没有’,这时候moveTo与lineTo的效果一样,后面会用到
这个特性。
关于绘制封闭的多边形
当使用moveTo与lineTo绘制一个封闭多边形时,如果线条宽度比较大(大于1个像素),可能会出现
衔接不完美的问题。
这时候一个比较标准的做法是将绘制过程放在beginPath()与closePath()之间。
closePath()表示状态结束并且封闭,如果绘制的图形不封闭,closePath()也
会自动将图形封闭起来。
填充与填充色
fillStyle = 'yellow' 属性指定填充色
fill() 填充图像
注意,当图形有边框时,填充色会覆盖内部的一半边框,解决方案是先填充再描边
矩形、覆盖和透明色
rect(x, y, width,height)
fillRect(x, y, width, height)
strokeRect(x, y, width, height) //你这么聪明应该知道这三个什么意思
后绘制的图形,会把先绘制的图形覆盖。
对于fillStyle与strokeStyle属性,可以赋予的值类型有:
1.#ffffff
2.#642
3.rgb(255, 128, 0)
4.rgba(100, 100, 100, 0.8)
5.hsl(20, 62%, 28%)
6.hsla(40, 82%,33%, 0.6)
7.red
将fillStyle赋值为透明色时候,在遮挡关系上就可以看到后面的颜色
lineCap
lineCap 线条的帽子,值线条两端的样式,取值可以是:
1.butt //这是默认的
2.roud
3.square
大概长这样
注意线段的两端有区别
什么?不够清楚?
那这样
这个属性只对线段的开始和结尾处有用,在线段与线段的衔接处没有改变
lineJoin与miterLimit
lineJoin表示线条衔接处的样式,可以有三个取值
1.miter(默认,显示为尖角)
2.bevel(表示会将尖角折叠起来)
3.round(在衔接处用一个弧形过度)
miterLimit
1.这个属性的值有一个计算方式,可以简单理解为尖锐程度
2.默认值是10,当尖锐程度超过这个值时,就会以bevel的方式来展现
暂时先这样