首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >canvas的api的学习(一)

canvas的api的学习(一)

作者头像
前端老鸟
发布2019-08-01 15:21:10
3720
发布2019-08-01 15:21:10
举报
文章被收录于专栏:front-end technologyfront-end technology

简介

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的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>
  • lineTo( 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); // lineTo
    ctx.stroke();
  </script>

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核心技术
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年07月31日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简介
  • canvas的基本使用
    • canvas的api
      • canvas学习推荐资料
      相关产品与服务
      媒体处理
      媒体处理(Media Processing Service,MPS)是一种云端音视频处理服务。基于腾讯多年音视频领域的深耕,为您提供极致的编码能力,大幅节约存储及带宽成本、实现全平台播放,同时提供视频截图、音视频增强、内容理解、内容审核等能力,满足您在各种场景下对视频的处理需求。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档