Canvas入门学习笔记-蒲公英云

Canvas入门学习笔记

1. 什么是Canvas？

1.canvas标签是HTML5中的一个标签，是一个绘制面板(画布)
2.需要结合js代码进行操作，canvas定义为页面的一个可以绘制图像的区域
3.canvas默认像素是300*150
注意：如果浏览器不支持canvas标签，标签中的内容会显示出来

方法	描述
moveTo()	把路径移动到画布中的指定点，不创建线条
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条
stroke()	绘制已定义的路径
beginPath()	起始一条路径，或重置当前路径
closePath()	创建从当前点回到起始点的路径
arc()	创建弧/曲线（用于创建圆形或部分圆）
setLineDash	设置虚线(参数是一个数组)
fill()	填充当前绘图(路径)
lineDashOffset	设置虚线偏移量

属性	描述
lineCap	设置或返回线条的结束端点样式
lineJoin	设置或返回两条线相交时，所创建的拐角类型
lineWidth	设置或返回当前的线条宽度
miterLimit	设置或返回最大斜接长度，只有当 lineJoin 属性为 “miter” 时，miterLimit 才有效。

方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）
addColorStop()	规定渐变对象中的颜色和停止位置

注意：

addColorStop(stop,color);
stop: 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color: 在结束位置显示的 CSS 颜色值

属性	方法
globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上

注意：globalCompositeOperation所对应的值：

值	描述
source-over	默认。在目标图像上显示源图像。
source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out	在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over	在源图像上方显示目标图像。
destination-atop	在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in	在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out	在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter	显示源图像 + 目标图像。
copy	显示源图像。忽略目标图像。
source-over	使用异或操作对源图像与目标图像进行组合。