1.canvas基础(1)

作者: 琉璃_xin | 来源:发表于2019-04-10 16:09 被阅读0次

1.canvas基础(1)
UGUI_.Canvas
1.canvas介绍
文字的绘制
自定义View drawText()绘制文字
css3-canvas
CSS3-canvas
Android 高级UI8 Canvas的使用
2018-07-24 学习总结
HTML5初级知识总结

canvas定义

Canvas 对象是 HTML5 中新增的。
HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）
参考文档： MDN, API中文网

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      background: #000;
    }
  </style>
</head>
<body>
  <canvas></canvas>
</body>
</html>

image.png
canvas默认大小为300*150，我们可以通过canvas标签的width,height属性来设置其宽高，不可通过css属性样式来设置，css样式会导致canvas内的图像按照300*150的比例进行放大或者缩小。
注意：canvas默认为透明，不设置其背景色时，可以显示其下方遮盖内容

getContext()

canvas元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

image.png

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

image.png

`1. 颜色，样式和阴影`

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影与形状的水平距离
shadowOffsetY	设置或返回阴影与形状的垂直距离

方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）
createPattern()	在指定方向上重复指定的元素
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）
addColorStop()	规定渐变对象中的颜色和停止位置

`2.线条样式`

属性	描述
linecap	设置或返回线条的结束端点样式
lineJoin	设置或返回两条线相交时，所创建的拐角类型
lineWidth	设置或返回当前的线条宽度
miterLimit	设置或返回最大斜接长度

`3.矩形`

方法	描述
rect()	创建矩形
fillRect()	绘制被填充的矩形
strokeRect	绘制矩形（无填充）
clearRect()	在给定的矩形内清除指定的像素

`4.路径`

方法	描述
fill()	填充当前绘图（路径）
stroke()	绘制已定义的路径
beginPath()	起始一条路径，或重置当前路径
moveTo()	把路径移动到画布中的指定点，不创建线条
closePath()	创建从当前点回到起始点的路径
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip()	从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()	创建二次贝塞尔曲线
bezierCurveTo()	创建三次贝塞尔曲线
arc()	创建弧/曲线（用于创建圆形或部分圆）
arcTo()	创建两切线之间的弧/曲线
isPointInPath()	如果指定的点位于当前路径中，返回true,否则返回false

`5.转换`

方法	描述
scale()	缩放当前绘图至更大或更小
rotate()	旋转当前绘图
translate()	重新映射画布上的（0，0）位置
transform()	替换绘图的当前转换矩阵
setTransform()	将当前转换重置为单位矩阵，然后运行transform()

`6.文本`

属性	描述
font	设置或返回文本内容的当前字体属性
textAlign	设置或返回文本内容的当前对齐方式
textBaseLine	设置或返回在绘制文本时使用的当前文本基线

方法	描述
fillText()	在画布上绘制被填充的文本
strokeText()	在画布上绘制文本（无填充）
measureText()	返回包含指定文本宽度的对象

`7.图像绘制`

方法	描述
drawImage()	向画布上绘制图像，画布或者视频

`8.像素操作`

属性	描述
width	返回ImageData对象的宽度
height	返回ImageData对象的高度
data	返回一个对象，其包含指定的ImageData对象的图像数据

方法	描述
createImageData()	创建新的，空白的ImageData对象
getImageData()	返回ImageData对象，该对象为画布上指定的矩形复制像素数据
putImageData()	把图像数据（从指定的ImageData对象）放回画布上

`9.合成`

属性	描述
globalAlpha	设置或返回绘图的当前aloha或透明度
globalComposeiteOperation	设置或返回新图像如何绘制到已有图像上

`10.其他`

方法	描述
save()	保存当前环境的状态
restore()	返回之前保存过的路径状态和属性
createEvent()
getContext()
toDataURL()	可以返回Canvas图像对应的data URI，也就是平常我们所说的base64地址

canvas兼容

<canvas>元素与<img>标签的不同之处在于，就像<video>，<audio>，或者 <picture>元素一样，很容易定义一些替代内容。由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者文本浏览器不支持HTML元素"canvas"，在这些浏览器上你应该总是能展示替代内容。

 <canvas id="canvas" width="400" height="400">
    canvas unsupported
 </canvas>

ie8出现以下替换界面：

image.png

替换内容是用于在不支持 <canvas> 标签的浏览器中展示的。通过简单的测试getContext()方法的存在，脚本可以检查编程支持性

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

绘制图形

`1. 绘制矩形`

rect(x, y, width, height)
绘制一个左上角坐标为（x,y），宽高为width以及height的矩形

    ctx.beginPath();
    ctx.rect(100, 25, 100, 100)
    ctx.stroke();

image.png

fillRect(x,y,width,height)
绘制一个填充的矩形
strokeRect(x,y,width,height)
绘制一个矩形的边框
clearRect(x,y,width,height)
清除指定矩形区域，让清除部分完全透明。

ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);

image.png

可以看到填充以及描边的颜色默认为黑色，通过fillStyle,strokeStyle改变其样式

ctx.fillStyle = 'pink';
ctx.fillRect(25, 25, 100, 100);
ctx.strokeStyle = 'red';
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);

`2. 绘制路径`

创建路径起始点
生成路径的第一步叫做beginPath(),路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。
注意：当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置
使用画图命令去画出路径
把路径封闭
闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。
注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合
通过描边和填充来渲染图形

ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();

image.png

`3.绘制线`

lineTo(x,y)
绘制一条从当前位置到指定x以及y位置的直线
该方法有两个参数：x以及y ，代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点，等等。。。开始点也可以通过moveTo()函数改变。

    ctx.beginPath();
    ctx.moveTo(200,200);
    ctx.lineTo(100,100);
    ctx.lineTo(50,100);
    ctx.closePath();
    ctx.stroke();

闭合路径，描边

    ctx.beginPath();
    ctx.moveTo(200,200);
    ctx.lineTo(100,100);
    ctx.lineTo(50,100);
    ctx.stroke();

不闭合，描边

    ctx.beginPath();
    ctx.moveTo(200,200);
    ctx.lineTo(100,100);
    ctx.lineTo(50,100);
    ctx.fill();

填充，自动闭合

lineWidth = value
设置线条宽度

    for(var i = 0; i < 10; i++){
      ctx.lineWidth = i + 1;
      ctx.strokeStyle = 'lightpink';
      ctx.beginPath();
      ctx.moveTo(5 + i * 12,5);
      ctx.lineTo(5 + i * 12,120);
      ctx.stroke();
    }

image.png

lineCap = type
设置线条末端样式
butt，round 和 square。默认是 butt

image.png

lineJoin = type
设置线条与线条间接合处的样式
round, bevel 和 miter。默认是 miter

image.png
miterlimit = value
限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度(lineJoin类型为miter时，miter生效的限制值)

getLineDash()
返回一个包含当前虚线样式，长度为非负偶数的数组
setLineDash(segments)
设置当前虚线样式，线的实线和透明部分长度

    ctx.beginPath();
    ctx.setLineDash([4,2]);
    ctx.moveTo(20, 70);
    ctx.lineTo(280, 70);
    ctx.stroke();

image.png

lineDashOffset = value
设置虚线样式的起始偏移量

    let i = 1;
    setInterval(function(){
      ctx.clearRect(0,0, canvas.width, canvas.height);
      ctx.beginPath();
      i ++;
      if(i > 20) {
        i = 1;
      }
      ctx.lineDashOffset = i;
      ctx.setLineDash([10,20]);
      ctx.strokeRect(100,100,100,50);
      ctx.stroke();
    },200)

GIF.gif

`4. 圆弧`

arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成，为true时，是逆时针方向，否则顺时针方向。

image.png
弧度=(Math.PI/180)*角度

    ctx.beginPath();
    ctx.arc(50,50,50,0,Math.PI / 2,true)
    ctx.closePath();
    ctx.strokeStyle = 'rgb(255,255,255)';
    ctx.stroke();

image.png

arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点

    ctx.beginPath();
    ctx.moveTo(150,80);
    ctx.arcTo(150, 100, 200, 40, 40);
    ctx.strokeStyle = 'red';
    ctx.stroke();

image.png

`5. 渐变`

可以用线性或者径向的渐变来填充或描边
createLinearGradient(x1, y1, x2, y2)
createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)
createRadialGradient(x1, y1, r1, x2, y2, r2)
createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆
同时需要addColorStop(position,color)配合上色

    var lingrad = ctx.createLinearGradient(0,0,0,150);
    lingrad.addColorStop(0, '#00ABEB');
    lingrad.addColorStop(1, '#fff');
    ctx.fillStyle = lingrad;
    ctx.fillRect(10,10,130,130);

    var radgrad2 =ctx.createRadialGradient(45,45,10,52,50,30);
    radgrad2.addColorStop(0, '#FF5F98');
    radgrad2.addColorStop(0.75, '#FF0188');
    radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
    ctx.fillStyle = radgrad2;
    ctx.fillRect(0,0,150,150);

image.png

`6. 文本`

文本渲染方法
fillText(text,x,y,[,maxWidth])
strokeText(text,x,y,[,maxWidth])
文本样式
font = value
默认字体是 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 = "48px serif";
    ctx.textBaseline = "hanging";
    ctx.strokeText("Hello world", 0, 100);

image.png

`7. 使用图像`

引入图像到canvas中需要一下基本操作：

获取一个指向htmlImageElement对象或者另一个canvas元素的引用作为源，也可以通过url的方式来使用图片
使用相同页面内的图片
document.getElementById()获取这个图片
使用其他域名下的图片
在 HTMLImageElement上使用crossOrigin属性，你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片，那么你可以使用这个图片而不污染canvas，否则，使用这个图片将会污染canvas
使用其他canvas元素
document.getElementByTagName 或者 document.getElementById 获取其他准备好的canvas
从零开始创建图像

var img = new Image();   // 创建一个<img>元素
img.onload = function(){
  // 执行drawImage语句
}
img.src = 'myImage.png'; // 设置图片源地址

通过data:url方式嵌入图像
可以引用Base64编码字符串来定义图片进行引用
使用视频帧
即使视频不可见也可以这样做

function getMyVideo() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    return document.getElementById('myvideo');
  }
}

使用drawImage() 函数绘制图片到画布上

ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

image: 绘制在Canvas上的元素
dx:在Canvas画布上规划一片区域用来放置图片，dx就是这片区域的左上角横坐标
dy:在Canvas画布上规划一片区域用来放置图片，dy就是这片区域的左上角纵坐标
dWidth:在Canvas画布上规划一片区域用来放置图片，dWidth就是这片区域的宽度
dHeight:在Canvas画布上规划一片区域用来放置图片，dHeight就是这片区域的高度
sx:表示图片元素绘制在Canvas画布上起始横坐标
sy:表示图片元素绘制在Canvas画布上起始纵坐标
sWidth:表示图片元素从坐标点开始算，多大的宽度内容绘制Canvas画布上
sHeight:表示图片元素从坐标点开始算，多大的高度内容绘制Canvas画布上

    let img = new Image();
    img.onload = () => {
      ctx.drawImage(img,0,0);
    };
    img.src = 'https://www.canvasapi.cn/assets/images/examples/500/1.jpg';

image.png

   let img = new Image();
    img.onload = () => {
      ctx.drawImage(img,0,0,100,100,50,50,50,50);
    };
    img.src = 'https://www.canvasapi.cn/assets/images/examples/500/1.jpg';

image.png

注意：如果不指定图片放置的位置和大小 ctx.drawImage(img,0,0,100,100) 这样就会使得图片整体放到放置区域，可能导致形变

1.canvas基础(1)
canvas定义 Canvas 对象是 HTML5 中新增的。HTML5 标签用于绘制图像（通过脚本，通常是 ...
UGUI_.Canvas
【1.Canvas】-----------------------------------------------...
1.canvas介绍
1.canvas介绍 https://blog.csdn.net/qq_42671194/article/deta...
文字的绘制
1.canvas绘制文字的方式 drawText drawTextOnPath drawTextRun stati...
自定义View drawText()绘制文字
1.Canvas 绘制文字方式 Canvas 绘制文字的方式：drawText() drawTextRun() d...
css3-canvas
1.canvas画布，是一个标签。 2.画矩形：1> 空心 stroke 语法 context.strokeRe...
CSS3-canvas
1.canvas画布，是一个标签。 2.画矩形：1> 空心 stroke 2>实心 fill...
Android 高级UI8 Canvas的使用
Android 高级UI 目录 1.Canvas基本绘制 1.1drawLine 绘制直线 1.2drawLine...
2018-07-24 学习总结
1.canvas基本图形绘制 (1)直线段 (2).圆形 (3)圆弧 (4).图片 image.png 2.for...
HTML5初级知识总结
1.canvas绘制步骤添加canvas元素，定义id和范围 js里获取canvas元素通过getConte...