Canvas

勤奋的懒洋洋
187 阅读6分钟

什么是Canvas

元素是HTML5新增的标签，用于图形的绘制，标签只是图形容器，必须使用脚本来绘制图形；在没有canves的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互；有了canves，可以只使用JavaScript完成绘制

浏览器支持

image.png

Canvas的使用

    <canvas id="myCanvas" width="300" height="100">对不起，你的浏览器版本过低，点击<a href='#'>下载</a></canvas>

注意：

canvas的宽高不能在css样式中定义,会造成canvas内部强制拉伸变形；永远不要在样式中设置canvas的宽高； 标签中加的文字是避免有些浏览器不支持canvas故做的一些提示； canvas 元素默认没有边框和内容，使用style属性来添加边框，页面中可以使用多个canvas；

绘制矩形

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

    let c=document.getElementById("myCanvas");
    let ctx=c.getContext("2d");
    // fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
    ctx.fillStyle="#FF0000";
    // fillRect()方法定义了矩形当前的填充方式
    ctx.fillRect(0,0,100,75);

image.png

Canvas 画线

    <canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;">
   您的浏览器不支持 HTML5 canvas 标签。</canvas>

    let c=document.getElementById("myCanvas");
    let ctx=c.getContext("2d");
    ctx.moveTo(0,0); // 线条开始坐标
    ctx.lineTo(200,100); // 线条结束坐标
    ctx.strokeStyle = "red" // 线条颜色
    ctx.lineWidth = "10" // 线条粗细
    ctx.stroke(); // 使用 stroke() 方法来绘制线条:

image.png

Canvas 绘制圆

arc(x,y,r,start,stop,false) // arc（圆心x，圆心有，圆心半径r，开始弧度，结束弧度，顺逆时针【true逆时针/false顺时针】）

    // Math.PI：画圆用的度数
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.strokeStyle = "red"
    ctx.lineWidth = "5"
    ctx.stroke();
    ctx.fillStyle = "skyblue"; // 填充颜色
    ctx.fill();

image.png

Canvas绘制文字

  • font -定义字体类似css中的font属性 简写顺序如下：
    • font-style
    • font-weight
    • font-size/line-height
    • font-family
  • fillText(text,x,y) - 绘制实心文本
  • strokeText(text,x,y) - 绘制空心文本
  • 不写则为默认属性，其中字体大小和字体库是必须的
    Hello World!

    let c=document.getElementById("myCanvas");
    let ctx=c.getContext("2d");
    ctx.font="italic bold 30px Arial";
    ctx.strokeText("Hello World",20,60);

image.png

Canvas -渐变

  • createLinearGradient(x,y,x1,y1) - 创建线条渐变（渐变起点x，渐变起点y，终点x，终点y）

  • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变 (起始圆心x，起始圆心y，起始圆半径，终点圆心x，终点圆心y,终点圆半径)

  • addColorStop() :指定颜色停止，参数使用坐标来描述，可以是0至1

    let c=document.getElementById("myCanvas");
    let ctx=c.getContext("2d");
    // 创建渐变
    let grd=ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"#92fe9d"); 
    grd.addColorStop(1,"#00c9ff");
    // 填充渐变
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);

image.png

径向渐变

    
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");

let grd=ctx.createRadialGradient(80,80,5,120,100,100);
grd.addColorStop(0,"#3f51b1");
grd.addColorStop(0.13,"#5a55ae");
grd.addColorStop(0.25,"#7b5fac");
grd.addColorStop(0.38,"#8f6aae");
grd.addColorStop(0.5,"#a86aa4");
grd.addColorStop(0.62,"#cc6b8e");
grd.addColorStop(0.75,"#f18271");
grd.addColorStop(0.87,"#f3a469");
grd.addColorStop(1,"#f7c978");

ctx.fillStyle=grd;
ctx.fillRect(50,50,350,180);

image.png

Canvas - 绘制图片

  • drawImage(image,x,y) ---- (图片对象，绘制起点x，绘制起点y),

  • drawImage(image,x,y,w,h) ---- (图片对象，绘制起点x,绘制起点y,绘制宽度，绘制高度)

  • drawImage(image,x,y,w,h,x1,y1,w1,h1) ---- (图片对象， 裁剪起点x, 裁剪起点y， 裁剪宽度， 裁剪高度，绘制起点x, 绘制起点y, 绘制宽度，绘制高度)

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    let imgObj = new Image();
    imgObj.src = './ikun.png';
    imgObj.onload = function() {
      ctx.drawImage(imgObj,20,20);
      // ctx.drawImage(imgObj,10,10,300,300);
      // ctx.drawImage(imgObj,0,0,300,300,10,10,300,300)
    }

image.png

image.png

image.png

API

颜色、样式和阴影

属性描述
fillStyle设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle设置或返回用于笔触的颜色、渐变或模式
shadowColor设置或返回 用于阴影的颜色
shadowBlur设置或返回用于 阴影的模糊级别
shadowOffsetX设置或返回阴影与形状的水平距离
shadowOffsetY设置或返回阴影与形状的垂直距离
方法描述
----
createLinearGradient()创建线性渐变（用于画布内容上）
createPattern在指定的方向上重复指定的元素
createRadialGradient()创建放射状/环形的渐变（用于画布内容上）
addColorStop()规定渐变对象中的颜色和停止位置

线条样式

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

矩形

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

路径

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

转换

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

文本

属性描述
font设置或返回文本内容的当前字体属性
textAlign设置或返回文本内容的当前对齐方式
textBaseline设置或返回在绘制文本时使用的当前文本基线
方法描述
fillText()在画布上绘制"被填充的"文本
strokeText()在画布上绘制文本（无填充）
measureText()返回包含指定文本宽度的对象

图像绘制

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

像素操作

属性描述
width返回ImageData对象的宽度
height返回ImageData对象的高度
data返回一个对象，其包含指定的ImageData对象的图像数据
方法描述
----
createImageData()创建新的、空白的ImageData对象
getImageData()返回ImageData对象，该对象为画布上指定的矩形复制像素数据
putImageData()把图像数据（从指定的ImageData对象）放回画布上

合成

属性方法
globalAlpha设置或返回绘图的当前alpha或透明值
globalCompositeOperation设置或返回新图像如何绘制到已有的图像上

其他

方法描述
save()保存当前环境的状态
restore()返回之前保存过的路径状态和属性
avatar
文章
阅读
粉丝