canvas
2019-05-28 20:37:38 0 举报AI智能生成
html canvas思维导图
作者其他创作
大纲/内容
基础
样式
fillStyle 填充样式
strokeStyle 边框样式
lineWidth 边框宽度
颜色
rgba()
red
#000000
绘图
fill() 内容填充
stroke() 绘制边框
使用
标签
canvas本身是没用绘图功能的,所有的回执工作必须在javaScript中完成
<canvas id="canvas" width="300" height="200">您的浏览器不支持canvas,请下载高版本的浏览器</canvas>
中间的内容在canvas不支持的情况下显示(也就是IE6-8),除了提示,一般还会这里面嵌套一个a标签放上下载高版本浏览器的连接
宽高样式这能写成属性,不能用css样式设置,其他的还是可以通过css样式设置的,因为它的坐标系是不一样的,不能用px单位
获取
先获取到元素-可以通过id获取 var canvas = document.getElementById('canvas');
然后拿到画布的执行上下文 var ctx = canvas.getContext('2d');
图形
线条
ctx.moveTo(x,y) 起始点
ctx.lineTo(x,y)
绘制一条从moveTo 到lineTo的线，如果没有moveTo 的话 lineTo也可以当中起点
曲线
context.quadraticCurveTo(qcpx,qcpy,qx,qy)
cp1x:第一个控制点x坐标
cp1y:第一个控制点y坐标
cp2x:第二个控制点x坐标
cp2y:第二个控制点y坐标
x:终点x坐标
y:终点y坐标
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
qcpx:二次样条曲线控制点x坐标
qcpy:二次样条曲线控制点y坐标
qx:二次样条曲线终点x坐标
qy:二次样条曲线终点y坐标
路径
开启路径
context.beginPath()
关闭路径
context.closePath()
注意
1、系统默认在绘制第一个路径的开始点为beginPath
2、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制
3、每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分
矩形
context.fillRect(x,y,width,height)
strokeRect(x,y,width,height)
圆形
context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
x:圆心的x坐标
y:圆心的y坐标
straAngle:开始角度
endAngle:结束角度
anticlockwise:是否顺时针
清除
context.clearRect(x,y,width,height)
x:清除矩形起点横坐标
y:清除矩形起点纵坐标
width:清除矩形长度
height:清除矩形高度
叠加
context.globalCompositeOperation=type
source-over（默认值）:在原有图形上绘制新图形
destination-over:在原有图形下绘制新图形
source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色
destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色
source-out:只显示新图形非交集部分
destination-out:只显示原有图形非交集部分
source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色
destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色
lighter:原有图形和新图形都显示，交集部分做颜色叠加
xor:重叠部分不现实
copy:只显示新图形
渐变
线性
createLinearGradient(xStart,yStart,xEnd,yEnd)
xstart:渐变开始点x坐标
ystart:渐变开始点y坐标
xEnd:渐变结束点x坐标
yEnd:渐变结束点y坐标
径向
createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
xStart:发散开始圆心x坐标
yStart:发散开始圆心y坐标
radiusStart:发散开始圆的半径
xEnd:发散结束圆心的x坐标
yEnd:发散结束圆心的y坐标
radiusEnd:发散结束圆的半径
文字
填充
context.fillText(text,x,y)
text:要绘制的文字
x:文字起点的x坐标轴
y:文字起点的y坐标轴
轮廓
context.strokeText(text,x,y)
text:要绘制的文字
x:文字起点的x坐标轴
y:文字起点的y坐标轴
垂直对齐
top、hanging、middle、alphabetic、ideographic、bottom
水平对齐
start、end、right、center
样式
font
Courier New
图片
引入图片
var img1=new Image();
设置路径
img1.src="my.png";
加载函数
确保加载完毕之后执行才可以使用图片 load
绘制图片
drawImage(image,x,y)：
drawImage(image,x,y,width,height)：
drawImage(image, cx, cy, cw, ch, px, py, pw, ph)
0 条评论
下一页
