专栏首页front-end technologycanvas的api的学习(一)
原创

canvas的api的学习(一)

简介

Canvas是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作

照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。

Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域,类似于其他通用

的二维API,通过一套完整的绘图函数来动态生成图形。

Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持Canvas, Internet Explorer 从IE9开始支持。Chrome和Opera 9+ 也支持。

canvas的基本使用

1.canvas标签使用

<canvas id="target" width="300px" height="150px">
  不支持canvas标签会显示该内容
</canvas>

2.canvas方法检查

var canvas = document.getElement('target')
if (canvas.getContext) {
  var ctx = canvas.getContent('2d')
} else {
  console.log('该浏览器版本过低,请更换')
}

3.canvas绘制图形

canvas.png

canvas的api

  • moveTo( x, y ) 将笔触移动到指定的坐标(x,y)<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(300,150); ctx.stroke(); </script><canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(300,150); // lineTo ctx.stroke(); </script>
  • lineTo( x, y ) 绘制一条从当前位置到指定的坐标(x,y)的直线

fill() 填充当前绘图(路径)

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.rect(20,20,150,100);
    ctx.fillStyle="red";
    ctx.fill();
  </script>

stroke() 绘制已定义的路径

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(20,100);
    ctx.lineTo(70,100);
    ctx.strokeStyle="green";
    ctx.stroke();
  </script>

beginPath() 起始(重置)当前路径

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.lineWidth="5";
    ctx.strokeStyle="red"; // 红色路径
    ctx.moveTo(0,75);
    ctx.lineTo(250,75);
    ctx.stroke(); // 进行绘制

    ctx.beginPath();
    ctx.strokeStyle="blue"; // 蓝色路径
    ctx.moveTo(50,0);
    ctx.lineTo(150,130);
    ctx.stroke(); // 进行绘制
  </script>

closePath() 结束当前路径

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

  var c=document.getElementById("canvas");
  var ctx=c.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(20,20);
  ctx.lineTo(20,100);
  ctx.lineTo(70,100);
  ctx.closePath();
  ctx.stroke();

</script>

clip() 从原始画布剪切任意形状和尺寸的区域

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
  您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    // 剪切矩形区域
    ctx.rect(50, 20, 200, 120);
    ctx.stroke();
    ctx.clip();
    // 在 clip() 之后绘制绿色矩形
    ctx.fillStyle="black";
    ctx.fillRect(0, 0, 150, 100);
  </script>

rect( x, y, width, height ) 绘制矩形

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

  <script>
    var c = document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.rect(20,20,150,100);
    ctx.stroke();
  </script>

fillRect( x, y, width, height ) 绘制被填充的矩形

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
  var c = document.getElementById("canvas");
  var ctx=c.getContext("2d");
  ctx.fillRect(100, 30, 150, 100);
</script>

strokeRect( x, y, width, height ) 绘制矩形(无填充)

  <canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
  您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
  var c=document.getElementById("canvas");
  var ctx=c.getContext("2d");
  ctx.strokeRect(20, 20, 150, 100);
  </script>

clearRect( x, y, width, height ) 清除指定的矩形内的像素

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="red";
    ctx.fillRect(0,0,300,150);
    ctx.clearRect(20,20,100,50);

canvas学习推荐资料

  • HTML5 Canvas核心技术

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • canvas的api的学习(一)

    Canvas是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作

    前端老鸟
  • 用es6快乐的写js代码

    ES6 提供的许多新特性。用这些新特性,我们能在不降低代码可读性与维护性的基础上畅快地写 JavaScript~

    前端老鸟
  • 带你玩转ECMAScript 6,助力你写出高效漂亮的代码

    ES6 提供的许多新特性。用这些新特性,我们能在不降低代码可读性与维护性的基础上畅快地写 JavaScript~

    前端老鸟
  • canvas的api的学习(一)

    Canvas是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作

    前端老鸟
  • Canvas 进阶(一)二维码的生成与扫码识别

    因此,打算写一系列关于 canvas 的文章,探索学习提升自己的同时顺便分享给大家。

    小皮咖
  • HTML5 Canvas API详解

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — ...

    业余草
  • Canvas画图-一个比想象中更骚气的圆(渐变圆环)

    之前介绍了Canvas画图基础,这篇介绍一下画一个带渐变效果的圆。 一个渐变的圆环 渐变色应用广泛,和圆环结合做进度条非常酷,今天我们就来画一个这样的圆环...

    Bob.Chen
  • canvas学习和滤镜实现

    最近学习了 HTML5 中的重头戏–canvas。利用 canvas,前端人员可以很轻松地、进行图像处理。其 API 繁多,这次主要学习常用的 API,并且完成...

    心谭博客
  • 学习 canvas 的 globalCompositeOperation 做出的神奇效果

    最早知道 canvas 的 globalCompositeOperation 属性,是在需要实现一个刮刮卡效果的时候,当时也就是网上找到刮刮卡的效果赶紧完成任务...

    FEWY
  • 【H5动画】谈谈canvas动画的闪烁问题

    用户1258909

扫码关注云+社区

领取腾讯云代金券