Canvas 标签:在网页中实时生成图像,并操作图像内容(通俗就是在网页中画画)
canvas画布可以制作在线绘图工具,
canvas画布可以制作动态数据图纸.常用于网站后台的数据统计功能.
canvas画布可以用于制作HTML5游戏
canvas画布可以制作app应用.....
书写:
<canvas id=“myCanvas” width=“500” height=“300”></canvas>
注意:
0.IE9+浏览器支持
1.默认300宽度,150高度
2.不要使用css给canvas设置宽度和高度-导致绘制的图形被缩放
3.canvas提供一个画图空间,有canvas API进行绘图
使用:
获取canvas对象
var obj = document.getElementById('myCanvas');
// canvas的宽度和高度
console.log(obj.width);
console.log(obj.height);
获取绘图环境
var ctx = obj.getContext('2d');
Canvas绘图常见图形
直线
方法
moveTo(x,y):将鼠标移动到指定的点
lineTo(x,y):将画笔移动到指定x,y点,形成一条直线
stroke():将点绘制成直线
属性
lineWidth:直线的厚度
strokeStyle:直线(边框)的颜色
lineCap:直线头尾的样式(不占据原来直线的长度)
butt:默认
round:圆形
square:方形(多出宽度一半的值)
lineJoin:两条直线的夹角的样式
miter:默认尖角
round:圆形
bevel:斜角
代表没有绘制结束
开启路径
beginPath()
关闭路径
closePath()
虚线
moveTo(100,100)
lineTo(400,100)
setLineDash([5,10]) 5:线段的长度 10:线段的间距
setLineDash([5,10,15,20]) 奇数线段长度,偶数线段间距
注意:如果是奇数个数,会复制数组元素为偶数,然后进行循环
矩形
fillStyle:填充颜色
strokeStyle:矩形边框颜色
fillRect(起始点的横坐标,起始点的纵坐标,矩形的宽度,矩形的高度):绘制矩形框并填充颜色
strokeRect(起始点的横坐标,起始点的纵坐标,矩形的宽度,矩形的高度):绘制矩形框设置边框的颜色
clearRect(起始点的横坐标,起始点的纵坐标,矩形的宽度,矩形的高度):清空指定矩形内容
圆弧(圆形)
arc(圆心横坐标,圆心纵坐标,半径,开始弧度,结束弧度,逆时针true|顺时针false方向绘制)
起点和终点,圆弧结合起来组成的图形(PI/2的形状协助理解)
canvas很多都是利用弧度进行计算的
(***)角度和弧度计算公式:弧度 = 角度*Math.PI/180
全圆:2PI(360)
半圆:PI(180)
1/4圆:PI/2(90)
曲线
moveTo(移动到指定位置的横坐标,指定位置的纵坐标)
arcTo(第一组控制点的横坐标,纵坐标,第二组控制点的横坐标,纵坐标,圆弧的半径)
二次贝塞尔曲线
quadraticCurveTo(第一组控制点横坐标,第一组控制点纵坐标,第二组控制点横坐标,第二组控制点纵坐标)
context.moveTo(100,200);
context.quadraticCurveTo(200,100,400,300);
三次贝塞尔曲线
bezierCurveTo(第一组控制点横坐标,纵坐标,第二组控制点横坐标,纵坐标,第三组控制点横坐标,纵坐标):三组控制点来掌控曲线方向
context.moveTo(100,200);
context.bezierCurveTo(150,150,300,300,400,100);
文本
方法
fillText(text, x, y, [maxWidth]):填充方式绘制文本
strokeText(text, x, y, [maxWidth]):绘制文字边框颜色
文本属性
font属性:跟CSS一样
textAlign属性:设置文字水平对齐方式
start(默认) end left right center
textBaseline属性:文本垂直方式
top hanging middle alphabetic(默认) ideographic bottom
悬挂 字母排序 思想的
measureText():获取文本的宽度
平移旋转缩放
translate():移动(横坐标,纵坐标)
注意:移动的同时,也将坐标原点移动
scale(x的方向的缩放倍数,y方向的缩放倍数):缩放
rotate(弧度):旋转的弧度
注意:如果要旋转,默认是以坐标原点旋转的,所以如果要旋转,必须确认坐标原点在哪里
save()/restore():将这两个方法之间的代码独立,里面的样式设置不会带外面的绘制产生影响
属性:
globalAlpha:设置全局的透明度
globalCompositeOperation:图片合成:
source-over 默认。在目标图像上显示源图像。
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。
source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的。
destination-over 在源图像上方显示目标图像。
destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的。
destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。
lighter 显示源图像 + 目标图像。
copy 显示源图像。忽略目标图像。
线性渐变:指定区间的颜色过渡
var color = context.createLinearGradient(起始点横坐标,起始点纵坐标,宽度,高度)
color.addColorStop(偏移值,颜色)
径向渐变(两个圆心的连线进行颜色过渡,两个圆的切线的焦点处进行颜色的扩散)
var color = context.createRadialGradient(开始圆心横坐标,圆心纵坐标,半径,结束圆圆心横坐标,结束圆圆心纵坐标,结束圆的半径);
color.addColorStop(偏移值,颜色)
阴影
阴影颜色
context.shadowColor = 'red';
阴影偏移值
context.shadowOffsetX = 20;
context.shadowOffsetY = 20;
设置模糊值
context.shadowBlur = 4;
图片对象
将图片绘制到canvas画布中
drawImage(imgObj,起始横坐标,纵坐标,[固定宽度],[固定高度]);
创建图片并设置图片是否重复
var bg = createPattern(imgObj,'repeat|repeat-x|repeat-y|no-repeat'):指定的方向内重复指定的元素
ctx.fillStyle = bg;
像素操作
// 获取canvas画布 指定区间位置 的 像素点集合对象
var obj = ctx.getImageData(起始横坐标,起始纵坐标,宽度,高度)
obj.width:行像素个数
obj.height:列像素个数
obj.data:整体像素组的颜色组成的数组
obj.data.length:像素个数的4倍(1个像素点4个颜色值)
rgba()都是0-255的范围,透明度也是
// 将图像obj写入到指定的canvas区间内
putImageData(obj,起始横坐标,起始纵坐标)
// 创建图像
createImageData(宽度,高度)
canvas画布可以制作在线绘图工具,
canvas画布可以制作动态数据图纸.常用于网站后台的数据统计功能.
canvas画布可以用于制作HTML5游戏
canvas画布可以制作app应用.....
书写:
<canvas id=“myCanvas” width=“500” height=“300”></canvas>
注意:
0.IE9+浏览器支持
1.默认300宽度,150高度
2.不要使用css给canvas设置宽度和高度-导致绘制的图形被缩放
3.canvas提供一个画图空间,有canvas API进行绘图
使用:
获取canvas对象
var obj = document.getElementById('myCanvas');
// canvas的宽度和高度
console.log(obj.width);
console.log(obj.height);
获取绘图环境
var ctx = obj.getContext('2d');
Canvas绘图常见图形
直线
方法
moveTo(x,y):将鼠标移动到指定的点
lineTo(x,y):将画笔移动到指定x,y点,形成一条直线
stroke():将点绘制成直线
属性
lineWidth:直线的厚度
strokeStyle:直线(边框)的颜色
lineCap:直线头尾的样式(不占据原来直线的长度)
butt:默认
round:圆形
square:方形(多出宽度一半的值)
lineJoin:两条直线的夹角的样式
miter:默认尖角
round:圆形
bevel:斜角
代表没有绘制结束
开启路径
beginPath()
关闭路径
closePath()
虚线
moveTo(100,100)
lineTo(400,100)
setLineDash([5,10]) 5:线段的长度 10:线段的间距
setLineDash([5,10,15,20]) 奇数线段长度,偶数线段间距
注意:如果是奇数个数,会复制数组元素为偶数,然后进行循环
矩形
fillStyle:填充颜色
strokeStyle:矩形边框颜色
fillRect(起始点的横坐标,起始点的纵坐标,矩形的宽度,矩形的高度):绘制矩形框并填充颜色
strokeRect(起始点的横坐标,起始点的纵坐标,矩形的宽度,矩形的高度):绘制矩形框设置边框的颜色
clearRect(起始点的横坐标,起始点的纵坐标,矩形的宽度,矩形的高度):清空指定矩形内容
圆弧(圆形)
arc(圆心横坐标,圆心纵坐标,半径,开始弧度,结束弧度,逆时针true|顺时针false方向绘制)
起点和终点,圆弧结合起来组成的图形(PI/2的形状协助理解)
canvas很多都是利用弧度进行计算的
(***)角度和弧度计算公式:弧度 = 角度*Math.PI/180
全圆:2PI(360)
半圆:PI(180)
1/4圆:PI/2(90)
曲线
moveTo(移动到指定位置的横坐标,指定位置的纵坐标)
arcTo(第一组控制点的横坐标,纵坐标,第二组控制点的横坐标,纵坐标,圆弧的半径)
二次贝塞尔曲线
quadraticCurveTo(第一组控制点横坐标,第一组控制点纵坐标,第二组控制点横坐标,第二组控制点纵坐标)
context.moveTo(100,200);
context.quadraticCurveTo(200,100,400,300);
三次贝塞尔曲线
bezierCurveTo(第一组控制点横坐标,纵坐标,第二组控制点横坐标,纵坐标,第三组控制点横坐标,纵坐标):三组控制点来掌控曲线方向
context.moveTo(100,200);
context.bezierCurveTo(150,150,300,300,400,100);
文本
方法
fillText(text, x, y, [maxWidth]):填充方式绘制文本
strokeText(text, x, y, [maxWidth]):绘制文字边框颜色
文本属性
font属性:跟CSS一样
textAlign属性:设置文字水平对齐方式
start(默认) end left right center
textBaseline属性:文本垂直方式
top hanging middle alphabetic(默认) ideographic bottom
悬挂 字母排序 思想的
measureText():获取文本的宽度
平移旋转缩放
translate():移动(横坐标,纵坐标)
注意:移动的同时,也将坐标原点移动
scale(x的方向的缩放倍数,y方向的缩放倍数):缩放
rotate(弧度):旋转的弧度
注意:如果要旋转,默认是以坐标原点旋转的,所以如果要旋转,必须确认坐标原点在哪里
save()/restore():将这两个方法之间的代码独立,里面的样式设置不会带外面的绘制产生影响
属性:
globalAlpha:设置全局的透明度
globalCompositeOperation:图片合成:
source-over 默认。在目标图像上显示源图像。
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。
source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的。
destination-over 在源图像上方显示目标图像。
destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的。
destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。
lighter 显示源图像 + 目标图像。
copy 显示源图像。忽略目标图像。
线性渐变:指定区间的颜色过渡
var color = context.createLinearGradient(起始点横坐标,起始点纵坐标,宽度,高度)
color.addColorStop(偏移值,颜色)
径向渐变(两个圆心的连线进行颜色过渡,两个圆的切线的焦点处进行颜色的扩散)
var color = context.createRadialGradient(开始圆心横坐标,圆心纵坐标,半径,结束圆圆心横坐标,结束圆圆心纵坐标,结束圆的半径);
color.addColorStop(偏移值,颜色)
阴影
阴影颜色
context.shadowColor = 'red';
阴影偏移值
context.shadowOffsetX = 20;
context.shadowOffsetY = 20;
设置模糊值
context.shadowBlur = 4;
图片对象
将图片绘制到canvas画布中
drawImage(imgObj,起始横坐标,纵坐标,[固定宽度],[固定高度]);
创建图片并设置图片是否重复
var bg = createPattern(imgObj,'repeat|repeat-x|repeat-y|no-repeat'):指定的方向内重复指定的元素
ctx.fillStyle = bg;
像素操作
// 获取canvas画布 指定区间位置 的 像素点集合对象
var obj = ctx.getImageData(起始横坐标,起始纵坐标,宽度,高度)
obj.width:行像素个数
obj.height:列像素个数
obj.data:整体像素组的颜色组成的数组
obj.data.length:像素个数的4倍(1个像素点4个颜色值)
rgba()都是0-255的范围,透明度也是
// 将图像obj写入到指定的canvas区间内
putImageData(obj,起始横坐标,起始纵坐标)
// 创建图像
createImageData(宽度,高度)