⑭HTML5 canvas的一系列使用方法（2）

最新推荐文章于 2022-01-12 13:29:53 发布
最新推荐文章于 2022-01-12 13:29:53 发布
阅读量340 收藏
点赞数
分类专栏： # HTML和CSS 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45613931/article/details/106544322
版权

Html5

本人是个新手，写下博客用于自我复习、自我总结。
如有错误之处，请各位大佬指出。
学习资料来源于：尚硅谷

使用图片&设置背景

在canvas中插入图片(需要image对象)：
1.canvas操作图片时，必须要等图片加载完才能操作
2.drawImage(image, x, y, width, height)
其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。width 和 height，这两个参数用来控制 当canvas画入时应该缩放的大小。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    body {
      background: pink;
    }

    #test {
      background: gray;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
</head>
<body>
<canvas id="test" width="300" height="300">
  <span>您的浏览器不支持画布元素</span>
</canvas>
</body>
<script type="text/javascript">
  window.onload = function () {
    var canvas = test;
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");

      var img = new Image();
      // 指定图片路径
      img.src = "tg.png";
      img.onload = function () {
        draw();
      }

      function draw() {
        ctx.drawImage(img, 0, 0, img.width, img.height)
      }
    }
  }
</script>
</html>

在canvas中设置背景(需要image对象)：
createPattern(image, repetition)
image:图像源
epetition有以下几个选项：
“repeat”
“repeat-x”
“repeat-y”
“no-repeat”

一般情况下，我们都会将createPattern返回的对象作为fillstyle的值

  window.onload = function () {
    var canvas = test;
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");

      var img = new Image();
      img.src = "tg.png";
      img.onload = function () {
        draw();
      }

      function draw() {
        var pattern = ctx.createPattern(img, "no-repeat")
        ctx.fillStyle = pattern;
        ctx.fillRect(0, 0, 300, 300);
      }
    }
  }

渐变效果

canvas线性渐变
createLinearGradient(x1, y1, x2, y2)
表示渐变的起点 (x1,y1) 与终点 (x2,y2)

gradient.addColorStop(position, color)
gradient : createLinearGradient的返回值
addColorStop 方法接受 2 个参数，
position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。
例如，0.5 表示颜色会出现在正中间。
color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)）

  window.onload = function () {
    var canvas = test;
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");

      var gradient = ctx.createLinearGradient(0, 0, 200, 200);
      gradient.addColorStop(0, "red");
      gradient.addColorStop(0.5, "yellow");
      gradient.addColorStop(0.7, "black");
      gradient.addColorStop(1, "green");
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, 300, 300);
    }
  }

在这里插入图片描述

canvas径向渐变
createRadialGradient(x1, y1, r1, x2, y2, r2)
前三个参数则定义另一个以(x1,y1) 为原点，半径为 r1 的圆，
后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

  window.onload = function () {
    var canvas = test;
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      var gradient = ctx.createRadialGradient(150, 150, 50, 150, 150, 100)
      gradient.addColorStop(0, "red");
      gradient.addColorStop(0.5, "yellow");
      gradient.addColorStop(0.7, "pink");
      gradient.addColorStop(1, "green");
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, 300, 300);
    }
  }

在这里插入图片描述

绘制文本

canvas 提供了两种方法来渲染文本:

fillText(text, x, y)
在指定的(x,y)位置填充指定的文本
strokeText(text, x, y)
在指定的(x,y)位置绘制文本边框

需要说明的是，文本样式 font 默认的字体是 10px sans-serif。
font属性在指定时，必须要有大小和字体 缺一不可。

  window.onload = function () {
    var canvas = test;
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "green"
      ctx.font = "40px sans-serif"
      ctx.fillText("csdn", 100, 100);
      ctx.strokeText("csdn", 100, 100);
    }
  }

在这里插入图片描述

textAlign
文本对齐选项。可选的值包括：
left：文本左对齐。
right：文本右对齐。
center：文本居中对齐。
这里的textAlign="center"比较特殊。textAlign的值为center时候：
文本的居中是基于你在fillText的时候所给的x的值，也就是说文本一半在x的左边，一半在x的右边

  window.onload = function () {
    var canvas = test;
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "green";
      ctx.font = "40px sans-serif";
      ctx.textAlign = "center";
      ctx.fillText("csdn", 50, 50);
    }
  }

在这里插入图片描述

textBaseline
描述绘制文本时，当前文本基线的属性。
top
文本基线在文本块的顶部。
middle
文本基线在文本块的中间。
bottom
文本基线在文本块的底部。

  window.onload = function () {
    var canvas = test;
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "green";
      ctx.font = "40px sans-serif";
      ctx.textBaseline = "middle";
      ctx.fillText("csdn", 0, 0);
    }
  }

在这里插入图片描述
measureText
measureText() 方法返回一个 TextMetrics 对象，包含关于文本尺寸的信息（例如文本的宽度）

  window.onload = function () {
    var canvas = test;
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "green";
      ctx.font = "60px sans-serif";
      ctx.fillText("csdn", 50, 50);
      var obj = ctx.measureText("csdn");
      console.log(obj);
    }
  }

在这里插入图片描述

例：canvas中 文本水平垂直居中

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background: black;
    }

    #c1 {
      background: white;
    }
  </style>
</head>
<body>
	<canvas id="c1" width="400" height="400"></canvas>
</body>
<script type="text/javascript">
  window.onload = function () {
    var oC = c1;
    var oGC = oC.getContext('2d');
    oGC.font = '60px impact';
    oGC.textBaseline = 'middle';
    var w = oGC.measureText('CSDN').width;
    oGC.fillText('CSDN', (oC.width - w) / 2, (oC.height - 60) / 2);
  };
</script>
</html>

在这里插入图片描述

阴影(文本阴影&盒模型阴影)

shadowOffsetX shadowOffsetY
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，
它们默认都为 0。
shadowBlur
shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
shadowColor(必需项)
shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

  window.onload = function () {
    var oC = c1;
    var oGC = oC.getContext('2d');

    //文本阴影&盒阴影
    oGC.shadowOffsetX = 20;
    oGC.shadowOffsetY = 20;
    oGC.shadowBlur = 30;
    oGC.shadowColor = "yellow";

    oGC.fillRect(0, 0, 100, 100);
  };

在这里插入图片描述

像素操作

在canvas中的像素操作：
到目前为止，我们尚未深入了解Canvas画布真实像素的原理，事实上，你可以直接通过ImageData对象操纵像素数据，直接读取或将数据数组写入该对象中

getImageData() 获得一个包含画布场景像素数据的ImageData对象,它代表了画布区域的对象数据。
ctx.getImageData(sx, sy, sw, sh)
sx:将要被提取的图像数据矩形区域的左上角 x 坐标。
sy:将要被提取的图像数据矩形区域的左上角 y 坐标。
sw:将要被提取的图像数据矩形区域的宽度。
sh:将要被提取的图像数据矩形区域的高度。

ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：
width:图片宽度，单位是像素
height:图片高度，单位是像素
data:Uint8ClampedArray类型的一维数组，
包含着RGBA格式的整型数据，范围在0至255之间（包括255）
R:0 --> 255(黑色到白色)
G:0 --> 255(黑色到白色)
B:0 --> 255(黑色到白色)
A:0 --> 255(透明到不透明)

putImageData()方法去对场景进行像素数据的写入。
putImageData(myImageData, dx, dy)
dx和dy参数表示你希望在场景内左上角绘制的像素数据所得到的设备坐标

  window.onload = function () {
    var canvas = test;
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      /*imageData
        width:横向上像素点的个数
        height:纵向上像素点的个数
        data:数组
          每一个像素点的rgba信息
      */
	  // 100*100 10000个像素点
      var imageData = ctx.getImageData(0, 0, 100, 100);
      for (var i = 0; i < imageData.data.length; i++) {
        imageData.data[4 * i + 3] = 100;
      }
      ctx.putImageData(imageData, 0, 0)
    }
  }

在这里插入图片描述
创建一个ImageData对象
ctx.createImageData(width, height);
width : ImageData 新对象的宽度。
height: ImageData 新对象的高度。
默认创建出来的是透明的

  window.onload = function () {
    var canvas = test;
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      //默认创建出来 rgba(0,0,0,0)
      var imageData = ctx.createImageData(100, 100);
      for (var i = 0; i < imageData.data.length; i++) {
        imageData.data[4 * i + 3] = 255;
      }
      ctx.putImageData(imageData, 100, 100)
    }
  }

在这里插入图片描述

例：操作单个像素（行与列）

  window.onload = function () {
    var canvas = test;
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      ctx.save();
      ctx.fillStyle = "pink";
      ctx.beginPath();
      ctx.fillRect(50, 50, 100, 100);
      ctx.restore();

      var imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < imgdata.width; i++) {
        setPxInfo(imgdata, 30, i, [0, 0, 0, 255]);
      }
      ctx.putImageData(imgdata, 0, 0);
    }


    function getPxInfo(imgdata, x, y) {
      var color = [];

      var data = imgdata.data;
      var w = imgdata.width;
      var h = imgdata.height;

      //r
      color[0] = data[(y * w + x) * 4];
      //g
      color[1] = data[(y * w + x) * 4 + 1];
      //b
      color[2] = data[(y * w + x) * 4 + 2];
      //a
      color[3] = data[(y * w + x) * 4 + 3];

      return color;
    }

    function setPxInfo(imgdata, x, y, color) {
      var data = imgdata.data;
      var w = imgdata.width;
      var h = imgdata.height;

      //(x,y)   x:多少列  y：多少行
      //r
      data[(y * w + x) * 4] = color[0];
      //g
      data[(y * w + x) * 4 + 1] = color[1];
      //b
      data[(y * w + x) * 4 + 2] = color[2];
      //a
      data[(y * w + x) * 4 + 3] = color[3];
    }
  }

在这里插入图片描述

例：给图片加上马赛克

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #msk {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
    }

  </style>
</head>
<body>
	<canvas id="msk"></canvas>
</body>
<script type="text/javascript">
  var oc = msk;
  if (oc.getContext) {
    var ctx = oc.getContext("2d");
    var img = new Image();
    img.src = "left01.jpg";
    img.onload = function () {
      oc.width = img.width;
      oc.height = img.height;
      draw();
    }

    function draw() {
      ctx.drawImage(img, 0, 0);

      var oldImgdata = ctx.getImageData(0, 0, img.width, img.height);
      var newImgdata = ctx.createImageData(img.width, img.height);
      //马赛克
      /*
        1.选取一个马赛克矩形
        2.从马赛克矩形中随机抽出一个像素点的信息(rgba)
        3.将整个马赛克矩形中的像素点信息统一调成随机抽出的那个
      */
      //选取一个马赛克矩形
      var size = 5;
      for (var i = 0; i < oldImgdata.width / size; i++) {
        for (var j = 0; j < oldImgdata.height / size; j++) {
          //Math.random()  [0,1)
          //Math.random()*size  [0,5)
          //Math.floor(Math.random()*size) [0,4]
          //从马赛克矩形中随机抽出一个像素点的信息(rgba)
          var color = getPxInfo(oldImgdata, i * size + Math.floor(Math.random() * size), j * size + Math.floor(Math.random() * size));

          //将整个马赛克矩形中的像素点信息统一调成随机抽出的那个
          for (var a = 0; a < size; a++) {
            for (var b = 0; b < size; b++) {
              setPxInfo(newImgdata, i * size + a, j * size + b, color)
            }
          }
        }
      }
      ctx.clearRect(0, 0, oc.width, oc.height);
      ctx.putImageData(newImgdata, 0, 0);
    }

    function getPxInfo(imgdata, x, y) {
      var color = [];
      var data = imgdata.data;
      var w = imgdata.width;
      var h = imgdata.height;

      color[0] = data[(y * w + x) * 4];
      color[1] = data[(y * w + x) * 4 + 1];
      color[2] = data[(y * w + x) * 4 + 2];
      color[3] = data[(y * w + x) * 4 + 3];
      return color;
    }

    function setPxInfo(imgdata, x, y, color) {
      var data = imgdata.data;
      var w = imgdata.width;
      var h = imgdata.height;
      data[(y * w + x) * 4] = color[0];
      data[(y * w + x) * 4 + 1] = color[1];
      data[(y * w + x) * 4 + 2] = color[2];
      data[(y * w + x) * 4 + 3] = color[3];
    }
  }
</script>
</html>

在这里插入图片描述

合成

全局透明度的设置globalAlpha
这个属性影响到 canvas 里所有图形的透明度，
有效的值范围是 0.0 （完全透明）到 1.0（完全不透明）
默认是 1.0

  window.onload = function () {
    var canvas = test;
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "red";
      ctx.globalAlpha = .5;
      ctx.fillRect(0, 0, 100, 100);
      ctx.fillRect(100, 100, 100, 100);
    }
  }

在这里插入图片描述

覆盖合成
globalCompositeOperation的参数：
source-over(默认值):源在上面,新的图像层级比较高
source-in :只留下源与目标的重叠部分(源的那一部分)
source-out :只留下源超过目标的部分
source-atop:砍掉源溢出的部分

destination-over:目标在上面,旧的图像层级比较高
destination-in:只留下源与目标的重叠部分(目标的那一部分)
destination-out:只留下目标超过源的部分
destination-atop:砍掉目标溢出的部分

  window.onload = function () {
    var canvas = test;
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "pink";
      ctx.fillRect(50, 50, 100, 100);
      ctx.globalCompositeOperation = "destination-atop";
      ctx.fillStyle = "green";
      ctx.fillRect(100, 100, 100, 100);
    }
  }

在这里插入图片描述

其他用法

将画布导出为图像toDataURL(注意是canvas元素接口上的方法)

  window.onload = function () {
    //拿到画布
    var canvas = test;
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      ctx.fillRect(0, 0, 199, 199);
      var result = canvas.toDataURL();
      console.log(result);
    }
  }

在这里插入图片描述
事件操作ctx.isPointInPath(x, y)
判断在当前路径中是否包含检测点
x:检测点的X坐标
y:检测点的Y坐标

注意，此方法只作用于最新画出的canvas图像

  window.onload = function () {
    var canvas = test;
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      ctx.beginPath();
      ctx.arc(100, 100, 50, 0, 360 * Math.PI / 180);
      ctx.fill();

      ctx.beginPath();
      ctx.arc(200, 200, 50, 0, 360 * Math.PI / 180);
      ctx.fill();

      canvas.onclick = function (ev) {
        ev = ev || event;
        var x = ev.clientX - canvas.offsetLeft;
        var y = ev.clientY - canvas.offsetTop;
        if (ctx.isPointInPath(x, y)) {
          alert(123);
        }
      }
    }
  }
只爭朝夕不負韶華
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
H5画布 canvas 入门到精通 _ 第二部分(绘制文字、图片、坐标系，canvas颜色和样式，canvas绘制环境)
m0_54866636的博客
02-23 1089
目录 1. 绘制文字 2. 绘制图片(drawImage) （1）基本绘制方法 （2）案例：序列帧动画 3. 绘制坐标系 4. canvas 颜色样式和阴影 5.?复杂样式 （1）渐变 （2）绘制背景图 （3）变换（重点） 6. 绘制环境的相关操作 1. 绘制文字 **ctx.font；**设置文本内容的字体属性，使用方式与 css font 相同 **ctx.textAlign；**设置文本内容的对齐方式 start：默认，文本在指定的位置开始 end：文本在指定的位置结束 center：文本的中
Canvas 详解
qq_38188762的博客
03-23 889
HTML 5 Canvas 参考手册 <canvas>标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，<canvas>元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。 Internet Explorer 9、Firefox2.0、Opera9.0、Chrome4.0 以及 Safari3.1 支持 <c...
Canvas API详解
hsany330的专栏
06-14 2722
概述 Canvas API（画布）用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。 使用前，首先需要新建一个<canvas>网页元素。 <canvas id="myCanvas" width="400" height="200"> 您的浏览器不支持canvas！ </canvas> 上面代码中，如果浏览器不支持这个API，则就会显示<canvas>标签中间的文字——“您的浏览器不
canvas画圆
编程界明世隐的博客
01-14 1万+
画圆方法说明 arc(x, y, radius, startAngle, endAngle, anticlockwise) 该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。 这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。 实例1 window.onload=function(){ var canvas = document.get
HTML5 Canvas基础概念（一）
读心悦
02-15 767
Canvas基础知识：Canvas属于行内元素，使用Canvas绘制图形步骤： 1、获取Canvas对象 2、获取上下文环境对象context。 3、开始绘制图形 在Canvas对象中常用属性 属性 说明 width Canvas的宽度 height Canvas的高度 Canvas常用的方法 属性 说明 getContext("2d") ...
html5使用Canvas绘图的使用方法
01-21
一、什么是Canvas Canvas 是H5的一部分，允许脚本语言动态渲染图像。Canvas 定义一个区域，可以由html属性定义该区域的宽高，javascript代码可以访问该区域，通过一整套完整的绘图功能（API）,在网页上渲染动态效果...
详解HTML5 canvas绘图基本使用方法
12-13
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。...
html5的canvas方法使用指南
01-21
canvas的方法  save()保存当前环境的状态  restore() 返回之前保存过的路径状态和属性  createEvent()  getContext()返回一个对象,指出访问绘图功能必要的API  toDataUPL() 返回canvas图像的URL 线条样式的属性...
vue 使用html2canvas将DOM转化为图片的方法
10-18
主要介绍了vue 使用html2canvas将DOM转化为图片的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
QML类型：Context2D
友善啊，朋友的博客
10-27 1917
一、描述 Context2D 对象可以通过 Canvas 项的 getContext() 方法创建： Canvas { id:canvas onPaint:{ var ctx = canvas.getContext('2d'); //... } } Context2D API 实现了相同的 W3C Canvas 2D Context API 标准，但具有一些增强功能。 Context2D API 提供了渲染上下文，它定义了在 Canvas 项目上绘制所需的方法和属性
Web前端学习笔记——Canvas 02
唯恋殊雨的博客
03-23 883
三、 canvas进阶3.1 Canvas颜色样式和阴影3.1.1 设置填充和描边的颜色（掌握）fillStyle : 设置或返回用于填充绘画的颜色strokeStyle: 设置或返回用于笔触的颜色以上两个值都可以接受颜色名,16进制数据，rgb值，甚至rgba. 一般先进行设置样式然后进行绘制。例如： ctx.strokeStyle = "red"; ctx.strokeStyle ...
canvas的drawImage方法参数详解
编程界明世隐的博客
03-12 3万+
引言： canvas很有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。 一旦获得了源图对象，我们就可以使用drawImage方法将它渲染到 canvas 里。 drawImage方法有三种形态： drawImage(image, dx, dy) 在画布指定位置绘制原图 drawImage(i...
canvas技术学习
weixin_40466351的博客
01-12 3308
一、管道流动动画 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var offset = 0; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.strokeStyl
Canvas相关用法
lucky_ferry的博客
11-05 267
首先canvas 只是一个容器元素，或者说提供一个画布，而真正绘制图片需要使用js脚本。 标签 <canvas> </canvas> canvas标签只有两个可选的属性 width height,如果不设置宽度和高度，默认是300*300；也可以通过css来设置宽高，但是可能会导致宽高和初始比例不一样，出现扭曲。 支持<canvas>的浏览器会只渲染<canvas>标签，而忽略其中的替代内容。不支持<canvas>的浏览器则 会直接渲...
python turtle 绘图_Python基本图形绘制——绘制自己的Python蟒蛇！
weixin_39754142的博客
11-25 305
前言Python作为数据可视化的工具，具有强大的绘图功能。阅读完本节，不仅能掌握Python基本图形绘制和turtle库，还能绘制一条自己的python(译为蟒蛇)。1turtle库概述turtle(海龟)库是turtle绘图体系的Python实现——turtle绘图体系：1969年诞生，主要用于程序设计入门—— Python语言的标准库之一——入门级的图形绘制函数库ps：标准库：随解释...
html5中Canvas为什么要用getContext('2d')
weixin_33978044的博客
06-15 3055
HTML DOM getContext() 方法 HTML DOM Canvas 对象 定义和用法 getContext() 方法返回一个用于在画布上绘图的环境。 语法 Canvas.getContext(contextID) 参数 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一...
Html5中Canvas绘制、样式详解（不包含动画部分）
Army-海军的博客
06-24 1万+
canvas是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.不过，canvas 元素本身并没有绘制能力（它仅仅是图形的容器） - 必须使用脚本来完成实际的绘图任务
canvas中的getContext()方法 以及 webgl中的getContext()方法
acoolgiser的博客
01-04 3万+
一、getContext()方法 翻译自：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext 语法：canvas.getContext(contextType, contextAttributes); var ctx = canvas.getContext（contextType）; v...
html5 canvas 文字居中对齐
热门推荐
clh604的专栏
01-08 3万+
html部分 css部分 canvas{width:1000px;height:700px;} js部分 初始的基本格式： window.onload=function(){ var canvas=document.getElementById('myCanvas'); var context=canvas.getContext('2d'); //后面书写绘
HTML5 Canvas 2D绘图指南：核心技术与方法
这个API主要用于HTML5的`<canvas>`元素，提供了一系列方法和属性来实现即时模式的2D绘图。" HTML5 Canvas 2D API 的核心是`<canvas>`元素，它定义了一个画布区域，通过JavaScript的2D绘图上下文（`2D Rendering ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

只爭朝夕不負韶華

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值