Canvas——JavaScript高级程序设计笔记(12)

本文介绍了HTML5 Canvas的基本用法,包括设置绘图区域、获取绘图上下文、绘制图形和图像的方法,以及如何使用变换、渐变和模式等高级特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第15章 Canvas


  1. 基本用法

    • 要使用<canvas>元素,必须先设置其width 和height 属性,指定可以绘图的区域大小。出现在
      开始和结束标签中的内容是后备信息,如果浏览器不支持元素,就会显示这些信息。下面就
      是元素的例子。
      <canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>
    • 要在这块画布(canvas)上绘图,需要取得绘图上下文。而取得绘图上下文对象的引用,需要调用
      getContext()方法并传入上下文的名字。传入”2d”,就可以取得2D 上下文对象。
      var drawing = document.getElementById("drawing");
      //确定浏览器支持<canvas>元素
      if (drawing.getContext){
      var context = drawing.getContext("2d");
      //更多代码
      }
    • 使用toDataURL()方法,可以导出在元素上绘制的图像。这个方法接受一个参数,即图像的MIME 类型格式,而且适合用于创建图像的任何上下文。比如,要取得画布中的一幅PNG 格式的图像,可以使用以下代码。
      var drawing = document.getElementById("drawing");
      //确定浏览器支持<canvas>元素
      if (drawing.getContext){
      //取得图像的数据URI
      var imgURI = drawing.toDataURL("image/png");
      //显示图像
      var image = document.createElement("img");
      image.src = imgURI;
      document.body.appendChild(image);
      }
  2. 2D 上下文

    • 坐标开始于<canvas>元素的左上角,原点坐标是(0,0)。所有坐标值都基于这个原点计算,x 值越大表示越靠右,y 值越大表示越靠下。默认情况下,width 和height 表示水平和垂直两个方向上可用的像素数目。

    • 两个属性:fillStyle 和strokeStyle
      var drawing = document.getElementById("drawing");
      //确定浏览器支持<canvas>元素
      if (drawing.getContext){
      var context = drawing.getContext("2d");
      context.strokeStyle = "red";
      context.fillStyle = "#0000ff";
      }

      以上代码将strokeStyle 设置为red(CSS 中的颜色名),将fillStyle 设置为#0000ff(蓝色)。
      然后,所有涉及描边和填充的操作都将使用这两个样式,直至重新设置这两个值。如前所述,这两个属
      性的值也可以是渐变对象或模式对象。本章后面会讨论这两种对象。

  3. 绘制矩形

    • fillRect()、strokeRect()和clearRect()。
      这三个方法都能接收4 个参数:矩形的x 坐标、矩形的y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。
    • fillRect()方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属
      性指定,比如:
      var drawing = document.getElementById("drawing");
      //确定浏览器支持<canvas>元素
      if (drawing.getContext){
      var context = drawing.getContext("2d");
      //绘制红色矩形
      context.fillStyle = "#ff0000";
      context.fillRect(10, 10, 50, 50);
      //绘制半透明的蓝色矩形
      context.fillStyle = "rgba(0,0,255,0.5)";
      context.fillRect(30, 30, 50, 50);
      }
    • strokeRect()方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定
  4. 绘制路径
    要绘制路径,首先必须调用beginPath()方法,表示要开始绘制新路径。然后,再通过调用下列方法来实际地绘制路径。
     arc(x, y, radius, startAngle, endAngle, counterclockwise):以(x,y)为圆心绘制一条弧线,弧线半径为radius,起始和结束角度(用弧度表示)分别为startAngle 和endAngle。最后一个参数表示startAngle 和endAngle 是否按逆时针方向计算,值为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)开始绘制一个矩形,宽度和高度分别由width 和height 指定。这个方法绘制的是矩形路径,而不是strokeRect()和fillRect()所绘制的独立的形状。
    创建了路径后,接下来有几种可能的选择。如果想绘制一条连接到路径起点的线条,可以调用closePath()。如果路径已经完成,你想用fillStyle 填充它,可以调用fill()方法。另外,还可以调用stroke()方法对路径描边,描边使用的是strokeStyle。最后还可以调用clip(),这个方法可以在路径上创建一个剪切区域。

  5. 绘制文本
    fillText()和strokeText()。这两个方法都可以接收4 个参数:要绘制的文本字符串、x 坐标、y 坐标和可选的最大像素宽度。而且,这两个方法都以下列3 个属性为基础。
     font:表示文本样式、大小及字体,用CSS 中指定字体的格式来指定,例如”10px Arial”。
     textAlign:表示文本对齐方式。可能的值有”start”、”end”、”left”、”right”和”center”。建议使用”start”和”end”,不要使用”left”和”right”,因为前两者的意思更稳妥,能同时适合从左到右和从右到左显示(阅读)的语言。
     textBaseline:表示文本的基线。可能的值有”top”、”hanging”、”middle”、”alphabetic”、
    “ideographic”和”bottom”。

  6. 变换
     rotate(angle):围绕原点旋转图像angle 弧度。
     scale(scaleX, scaleY):缩放图像,在x 方向乘以scaleX,在y 方向乘以scaleY。scaleX
    和scaleY 的默认值都是1.0。
     translate(x, y):将坐标原点移动到(x,y)。执行这个变换之后,坐标(0,0)会变成之前由(x,y)
    表示的点。
     transform(m1_1, m1_2, m2_1, m2_2, dx, dy):直接修改变换矩阵,方式是乘以如下
    矩阵。
    m1_1 m1_2 dx
    m2_1 m2_2 dy
    0 0 1
     setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy):将变换矩阵重置为默认状态,然后
    再调用transform()。

  7. 绘制图像
    2D 绘图上下文内置了对图像的支持。如果你想把一幅图像绘制到画布上,可以使用drawImage()
    方法。根据期望的最终结果不同,调用这个方法时,可以使用三种不同的参数组合。最简单的调用方式
    是传入一个HTML <img>元素,以及绘制该图像的起点的x 和y 坐标。例如:
    var image = document.images[0];
    context.drawImage(image, 10, 10);
    这两行代码取得了文档中的第一幅图像,然后将它绘制到上下文中,起点为(10,10)。绘制到画布上
    的图像大小与原始大小一样。如果你想改变绘制后图像的大小,可以再多传入两个参数,分别表示目标
    宽度和目标高度。通过这种方式来缩放图像并不影响上下文的变换矩阵。例如:
    context.drawImage(image, 50, 10, 20, 30);

  8. 阴影
    2D 上下文会根据以下几个属性的值,自动为形状或路径绘制出阴影。
     shadowColor:用CSS 颜色格式表示的阴影颜色,默认为黑色。
     shadowOffsetX:形状或路径x 轴方向的阴影偏移量,默认为0。
     shadowOffsetY:形状或路径y 轴方向的阴影偏移量,默认为0。
     shadowBlur:模糊的像素数,默认0,即不模糊。
    这些属性都可以通过context 对象来修改

  9. 渐变
    渐变由CanvasGradient 实例表示,很容易通过2D 上下文来创建和修改。要创建一个新的线性渐
    变,可以调用createLinearGradient()方法。这个方法接收4 个参数:起点的x 坐标、起点的y 坐
    标、终点的x 坐标、终点的y 坐标。调用这个方法后,它就会创建一个指定大小的渐变,并返回
    CanvasGradient 对象的实例。
    创建了渐变对象后,下一步就是使用addColorStop()方法来指定色标。这个方法接收两个参数:
    色标位置和CSS 颜色值。色标位置是一个0(开始的颜色)到1(结束的颜色)之间的数字。例如:
    var gradient = context.createLinearGradient(30, 30, 70, 70);
    gradient.addColorStop(0, “white”);
    gradient.addColorStop(1, “black”);

  10. 模式
    要创建一个新模式, 可以调用
    createPattern()方法并传入两个参数:一个HTML <img>元素和一个表示如何重复图像的字符串。
    其中,第二个参数的值与CSS 的background-repeat 属性值相同,包括”repeat”、”repeat-x”、
    “repeat-y”和”no-repeat”。看一个例子。
    var image = document.images[0],
    pattern = context.createPattern(image, “repeat”);
    //绘制矩形
    context.fillStyle = pattern;
    context.fillRect(10, 10, 150, 150);

  11. WebGL 上下文。WebGL 是从OpenGL ES 2.0 移植到浏览器中的,而OpenGL
    ES 2.0 是游戏开发人员在创建计算机图形图像时经常使用的一种语言。WebGL 支持比2D 上下文更丰富
    和更强大的图形图像处理能力,比如:
     用GLSL(OpenGL Shading Language,OpenGL 着色语言)编写的顶点和片段着色器
     支持类型化数组,即能够将数组中的数据限定为某种特定的数值类型
     创建和操作纹理

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值