canvas
- 什么是canvas
- 创建canvas对象
- ctx.fillRect(x,y,w,h)填充矩形
- ctx.strokeRect(x,y,w,h)描边矩形
- ctx.fillStyle填充颜色
- ctx.strokeStyle描边颜色
- ctx.rect(x,y,w,h)路径矩形
- ctx.fill()内容填充
- ctx.stroke()路径填充
- ctx.clearRect(x,y,w,h)清空区域
- arc(x, y, r, startAngle, endAngle, anticlockwise)圆弧
- arcTo(x1, y1, x2, y2, radius): 曲线
- ctx.quadraticCurveTo(拉扯点x, 拉扯点y, 第二个坐标x, 第二个坐标y);二次贝塞尔曲线
- bezierCurveTo(控制点1x, 控制点1y, 控制点2x, 控制点2y, 终点x, 终点y)三次贝塞尔曲线
- 路径绘制
- globalAlpha = 0.5: 这个属性影响到 canvas 里所有图形的透明度(0-1)
- 阴影
- 渐变
- 文本
- 状态的保存和恢复
- 变形
- 图像
- 背景
- 像素操作
- ctx.globalCompositeOperation='destination-out'
什么是canvas
1.canvas是HTML5提供的一种新标签<canvas></canvas>
2.HTML5 <canvas>标签元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。
3.<canvas>标签只是图形容器,必须使用脚本(js)来绘制图形。
4.Canvas是一个矩形区域的画布,可以用JavaScript在上面绘画。控制其每一个像素。
---其默认在页面上得的大小是width:300px; height:150px;
canvas可以用来干啥呢?
1.制作web网页游戏(但是如果代码写的不咋的游戏可能会非常卡)
2.数据可视化(这么说你可能不明白,但我告诉你echarts就是基于canvas)
3.广告banner的动态效果非常适合用canvas制作
4.canvas还可以用来内嵌一些网页
创建canvas对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<canvas id="canvas" width="300" height="300">当不支持canvas标签显示内部文字</canvas>
</body>
<script>
var can=document.querySelector('#canvas');
var ctx=can.getContext('2d');//创建canvas对象
</script>
</html>
ctx.fillRect(x,y,w,h)填充矩形
ctx.fillRect(100,100,100,100)//默认填充黑色
ctx.strokeRect(x,y,w,h)描边矩形
ctx.strokeRect(100,100,100,100)
ctx.fillStyle填充颜色
ctx.fillStyle='red'
ctx.strokeStyle描边颜色
ctx.strokeStyle='red'
ctx.rect(x,y,w,h)路径矩形
ctx.fill()内容填充
ctx.stroke()路径填充
ctx.clearRect(x,y,w,h)清空区域
arc(x, y, r, startAngle, endAngle, anticlockwise)圆弧
以(x, y) 为圆心,以r 为半径,从 startAngle 弧度开始到endAngle弧度结束。anticlosewise 是布尔值,true 表示逆时针,false 表示顺时针(默认是顺时针)。
ctx.arc(200,200,100,0*Math.PI/180,90*Math.PI/180)
ctx.stroke()
arcTo(x1, y1, x2, y2, radius): 曲线
1.有moveTo开始坐标(起始点)
2.3点确定弧度
3.arcTo(控制点1,控制点2,半径)
ctx.quadraticCurveTo(拉扯点x, 拉扯点y, 第二个坐标x, 第二个坐标y);二次贝塞尔曲线
bezierCurveTo(控制点1x, 控制点1y, 控制点2x, 控制点2y, 终点x, 终点y)三次贝塞尔曲线
路径绘制
beginPath() 新建一条路径
moveTo(x, y) 设置路径的起始点坐标。
lineTo(x, y) 设置经过点坐标。
closePath() 闭合路径
stroke() 绘制图形轮廓
fill() 填充路径
ctx.lineWidth = 10;线宽
lineJoin:边界连接点样式
1.miter(默认) 2.round(圆角) 3.bevel(斜角)
lineCap:端点样式
1.butt(默认) 2.round(圆角) 3.square(高度多出为宽一半的值)
globalAlpha = 0.5: 这个属性影响到 canvas 里所有图形的透明度(0-1)
阴影
shadowOffsetX=10:阴影x方向的偏移距离
shadowOffsetY=10:阴影y方向的偏移距离
shadowColor=‘red’:阴影的颜色
shadowBlur=10:阴影的模糊半径
渐变
ctx.createLinearGradient(坐标1x,坐标1y,坐标2x,坐标2y)线性渐变
var lineG = ctx.createLinearGradient(坐标1x,坐标1y,坐标2x,坐标2y);//坐标1向坐标2渐变
//设置渐变行为 参数描述: 颜色的偏移量 0-1, ;颜色的色值
lineG.addColorStop(0.6,'red');
lineG.addColorStop(1,'yellow');
//将填充样式变为自定义的线性渐变颜色
// ctx.fillStyle= lineG
// ctx.fillRect(80,80, 200,200);
createRadialGradient(x1, y1, R1,x2, y2, R2);径向渐变
var lineG = ctx.createRadialGradient(x1, y1, R1,x2, y2, R2);//坐标1向坐标2渐变
//设置渐变行为 参数描述: 颜色的偏移量 0-1, ;颜色的色值
lineG.addColorStop(0.6,'red');
lineG.addColorStop(1,'yellow');
//将填充样式变为自定义的线性渐变颜色
// ctx.fillStyle= lineG
// ctx.fillRect(80,80, 200,200);
文本
fillText(text, x, y [, maxWidth]) 填充文本
ctx.font = "100px sans-serif"
ctx.fillText("天若有情", 10, 100);
ctx.strokeText("天若有情", 10, 200)
strokeText(text, x, y [, maxWidth]) 绘制文本边框
文本样式
font = value 当前我们用来绘制文本的样式。
这个字符串使用和 CSS font 属性相同的语法。 默认的字体是 10px sans-serif。
textAlign = value 文本对齐选项。
可选的值包括:start, end, left, right or center。 默认值是 start。
textBaseline = value 基线对齐选项,
可选的值包括:top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。。
direction = value 文本方向。
可能的值包括:ltr, rtl, inherit。默认值是 inherit。
//垂直居中
ctx.font='30px import'
ctx.textAlign='center'
ctx.textBaseline='middle'
ctx.fillText('hello',can.width/2,can.height/2)
状态的保存和恢复
save ()开始保存
restore()结束保存
save 和 restore 方法是用来保存和恢复 canvas 状态的,都没有参数。作用不会对外部的操作有影响
变形
ctx.translate(x,y);位移(x轴,y轴)
ctx.rotate(45*Math.PI / 180);旋转
scale(x, y)放大(1是正常大小)
图像
ctx.drawImage(img,x,y);绘制图片
ctx.drawImage(image, x, y, width, height)
//1.如果图片从网络上加载,需要加载完成后
var img = new Image(); // 创建一个<img>元素
img.src = 'myImage.png'; // 设置图片源地址
img.onload = function(){
ctx.drawImage(img, 0, 0)
}
//图片来自body
<img src="./美女.jpg" alt="" width="300"><br>
<canvas id="tutorial" width="600" height="400"></canvas>
var img = document.querySelector("img");
ctx.drawImage(img, 0, 0);
背景
ctx.createPattern(img,no-repeat) 设置背景
像素操作
ctx.getImageData(x,y,w,h)获取像素信息
data:每四个数据是一个像素点rgba
r(0-255),g(0-255),b(0-255),a(0-255),
ctx.putImageData(imagedata,x,y)写入信息
ctx.createImageData(w,h)创建区域
ctx.createImageData(imagedata)创建写入imagedata
ctx.globalCompositeOperation=‘destination-out’
仅仅老图像与新图像没有重叠的部分。 注意显示的是老图像的部分区域。