canvas学习

最新推荐文章于 2023-12-12 14:44:10 发布

汉武大帝·

最新推荐文章于 2023-12-12 14:44:10 发布

阅读量166

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/yinge0508/article/details/108681182

版权

canvas 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

canvas（HTML5新增标签）

1，canvas 介绍（省略）

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

2.1 <canvas> 元素：

<canvas> 看起来和<img> 标签一样，知识<canvas> 只有两个可选的属性：width, height ; 没有src , alt 属性，如果不给<canvas> 设置width,height 属性时，则默认width 是300px，height是150px;也可以使用css属性来设置宽度高度，但是如果宽度属性和初始化比例不一致，会出现扭曲，所以不建议使用css属性设置<canvas>的宽高；
替换内容：正常情况下，写<canvas>时，是这样写的-->

<canvas id="dom" width="500" height="300"></canvas>

但是当一些浏览器不支持<canvas>标签时，可以这样写：

<canvas id="can" width="500" height="300">您的浏览器不支持canvas</canvas>

这样的话，对于不支持<canvas>的浏览器只会渲染标签里面的文字，而忽略<canvas>标签；支持<canvas>标签的浏览器只会渲染该标签，而忽略里面的元素；里面的元素也可以用其他的元素代替；可以用图片，可以用文字，，等等；

2.2 渲染上下文：

<canvas> 会创建一个固定大小的画布，会公开一个或多个渲染上下文（画笔），使用渲染上下文来绘制和处理要展示的内容，暂时先研究2D渲染上下文，

var can = documnet.getElementById("dom")
if(can.getContext){ // 判断是否支持
    var ctx = can.getContext('2d') 
}else{}

3. 模板框架：（html版本）

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

在vue项目中：

<template>
  <div class>
    <canvas id="tutorial" width="150" height="150"></canvas>
  </div>
</template> 
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    var canvas = document.getElementById("tutorial");
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
    }
  },
  methods: {},
};
</script> 
<style lang="less" scoped>
</style>

4，绘制形状：

设置好了canvas环境之后，开始绘制形状，首先了解下坐标系:

不同于svg，<canvas>只支持两种形式的图形绘制，矩形和路径，

三种矩形绘制的方法：

fillRect(x, y, width, height ) 绘制一个填充的矩形；x : 矩形左上角的 x 坐标。y : 矩形左上角的 y 坐标。
strokeRect(x, y , width, height) 绘制矩形的边框；x : 矩形左上角的 x 坐标。y : 矩形左上角的 y 坐标
clearRect(x, y , width, height) 清除制定矩形区域,让清除部分完全透明；x : 矩形左上角的 x 坐标。y:矩形左上角的 y 坐标

接下来使用这三个函数绘制图形------->

<template>
  <div class>
    <canvas id="tutorial" width="150" height="150"></canvas>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    var canvas = document.getElementById("tutorial");
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "rgb(200,0,0)";
      // 绘制填充矩形0
      ctx.fillRect(10, 10, 155, 150);
      // 绘制矩形边框
      ctx.strokeRect(20,20,80,90)
      // 绘制清除矩形
      ctx.clearRect(30,30,30,50)
    }
  },
  methods: {},
};
</script>
<style lang="less" scoped>
</style>

效果如图所示：

5，绘制路径：

绘制路径需要四个步骤，1》，首先需要创建路径起始点，2》然后使用绘图命令去绘制路径，3》，然后封闭路径，4》，路径生成后通过描边或填充路径区域来渲染图形；

以下是所要用到的函数：

beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath() 闭合路径之后图形绘制命令又重新指向到上下文中。（不是必需的）
stroke() 通过线条来绘制图形轮廓。
fill() 通过填充路径的内容区域生成实心的图形。

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

绘制一个三角形的例子： https://blog.csdn.net/yinge0508/article/details/109030013

上面代码中用到的函数介绍：

moveTo(x,y)

将指定的画笔移动到指定的坐标x 以及y上；当cancvs 初始化或者beginPath() 调用后，通常使用moveTo() 设置起点；也可以使用moveTo()绘制一些不连续的路径，比如下面的例子使用moveTo() 以及其他的一些函数画一些笑脸；

笑脸示例代码：https://blog.csdn.net/yinge0508/article/details/109030407

绘制直线的方法:

lineTo(x, y) 绘制一条从当前位置到指定位置(x,y)的直线；示例：绘制一个三角形 https://blog.csdn.net/yinge0508/article/details/109030013 ;

绘制圆弧的方法：

arc() https://blog.csdn.net/yinge0508/article/details/108752159

汉武大帝·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas学习

canvas（HTML5新增标签）2.1 <canvas> 元素：<canvas> 看起来和<img> 标签一样，知识<canvas> 只有两个可选的属性：width, height ; 没有src , alt 属性，如果不给<canvas> 设置width,height 属性时，则默认width 是300px，height是150px;也可以使用css属性来设置宽度高度，但是如果宽度属性和初始化比例不一致，会出现扭曲，所以不建议使用css
复制链接

扫一扫