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’
仅仅老图像与新图像没有重叠的部分。 注意显示的是老图像的部分区域。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
