js高级程序设计（canvas部分）

1.富文本编辑的方式

对一个网页上的文本进行编辑的可以选择使用富文本进行编辑，这里最简洁的一个也是兼容性最好的的一种方式就是给所要编辑的元素添加一个contenteditable属性，这样就可以对浏览器的元素进行像textarea一样进行编辑。

浏览器展示的信息内容

注：这里的contenteditable属性有3个枚举值：true、false、inherit。默认是true

2.初识Canvas

之前没玩过canvas，所以这里仔细的打磨一下。系统学习一下这个h5的新增标准

基本用法：在使用canvas元素之前，要先取得绘图上下文对象的引用，由于浏览器的不同，要先进行判断是否存在上下文的引用。

在使用canvas元素时，首先设置属性宽和高。

canvas元素

const canvasEle = document.getElementById("canvasEle");
if (canvasEle.getContext) {
  // 绘制2D图形
  const context = canvasEle.getContext("2d");
  ......
  // 将canvas作为png格式的图片导出
  const pngURL = canvasEle.toDataURL("image/png");
  const imgEle = document.createElement("img");
  imgEle.src = pngURL;
  document.body.appendChild(imgEle);
}

• canvas元素主要是一组API的方法，这里是绘制2d图形，使用的是getContext()，还可以绘制3d的图形。
• 导出canvas元素为图片的url，使用的是toDataURL()，默认参数是"image/png"格式

3.2d矩形绘制初识

对于2d图形绘制，主要存在下面几个API方法，就可以生成有意思的图形

• fillStyle: 填充的样式

• fillRect: 绘制的矩形,参数接受四个参数，分别为x, y, width, height

• strokeStyle:描边的样式

• strokeReact:矩形的描边,参数接受四个参数，分别为x, y, width, height

• clearReact:清除指定的矩形区域,参数接受四个参数，分别为x, y, width, height

  对矩形描边的宽度的控制使用的是lineWidth属性

const canvasEle = document.getElementById("canvasEle");
if (canvasEle.getContext) {
  const context = canvasEle.getContext("2d");
  context.fillStyle = "red";
  context.fillRect(10, 10, 50, 50);
  context.strokeStyle = "blue";
  context.strokeRect(30, 30, 50, 50);
  // 清除部分矩形区域
  context.clearRect(20, 20, 10, 10);
}

4.2d绘制路径初识

在自定义绘制复杂的路径时，以下关于2d的API是非常稳定的。在绘制路径时，首先要调用beginPath()作为初始化方法！

• beginPath(): 绘制路径的初始化方法

• arc(x, y, radius, startAngle, endAngle, counterclockwise):以x,y为圆心绘制一条弧线，最后一个参数表示startAngle, endAngle是否按逆时针绘制，值为true时是逆时针绘制， 为false时时顺时针绘制

• arcTo(x1, y1, x2, y2, radius):绘制的弧线从上一点开始，到x2, y2结束，并且以radius为半径，穿过x1,y1点

• bezierCurveTo(c1x, c1y, c2x, c2y, x, y):从上一点绘制一条曲线到x, y这个点结束，并且以c1x, c1y和 c2x, c2y为控制点

• lineTo(x, y):从上一点绘制一条直线，到x, y结束（常用）

• moveTo(x, y):将绘制游标移到x, y点（常用）

• quadraticCurveTo(cx, cy, x, y): 绘制二次曲线到x, y为止， 并且以cx, cy为控制点

• rect(x, y, width, height): 从x, y点回一条指定宽和高德路径

• closePath(): 绘制一条连接到起点的路径

• fill(): 对图形进行填充

• stroke():对路径进行描边

• clip():在路径上创建一个剪切区域

  下面这个示例是创建两个圆，里面包含两个指针，类似钟表。

  const canvasEle = document.getElementById("canvasEle");
  if (canvasEle.getContext) {
    const context = canvasEle.getContext("2d");
    context.beginPath();
    // 画一个外圆,顺时针绘制
    context.arc(100, 100, 100, 0, 2 * Math.PI, false);
    // 将游标移动到内圆的路径上0度位置
    context.moveTo(198, 100);
    // 画一个内圆，顺时针绘制
    context.arc(100, 100, 98, 0, 2 * Math.PI, false);
    // 将游标移动到(100, 100)处
    context.moveTo(100, 100);
    // 画一条直线，到(100, 15)
    context.lineTo(100, 15);
   // 将游标移动到(100, 100)处
    context.moveTo(100, 100);
    // 画一条直线，到(35, 100)
    context.lineTo(35, 100);
    //调用stroke()方法对路径进行描边
    context.storke();
  }
  

5.文本绘制

文本绘制主要有两个API方法搭配三个属性

• fillText(str, x, y, pixelRatio):在图形内显示的文本信息

• strokeText(str, x, y, pixelRatio): 在描边上显示的文本信息

  三个控制文本的属性

  • font: 表示文本的样式，大小个字体

  • textAlign: 表示文本的对齐方式

  • textBaseline:表示文本的基线

    // 接着上面的一个例子
    context.font = "bold 12px arial";
    context.textAlign = "center";
    context.textBaseline = "middle";
    // 显示文本的方法，在(100, 10)处显示文本"显示文本"
    context.fillText("显示文本", 100, 10);
    

因为本章把canvas单独介绍，所以这里只是一部分对canvas的介绍，下次继续