canvas基本使用

最新推荐文章于 2024-07-18 15:09:36 发布

全方位老邓

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量195

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/m0_46211662/article/details/108112949

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

标题：canvas基本大全

1.canvas是什么？

 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

2.canvas创建画布
注意·：默认情况下 (canvas) 元素没有边框和内容

<body>
    <canvas id="chess" width="450px" height="450px"></canvas>
</body>

3.canvas绘制直线
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
例：

<script>
    // 1.0 创建画板
    var canvas = document.getElementById('chess')
    // 2.0 准备画笔（获得上下文对象）
    var context = canvas.getContext('2d')
    // 设置画板宽高
    canvas.width = 900
    canvas.height = 700
    canvas.style.border = "2px solid rgb(37, 187, 179)"
    //起点
    context.moveTo(0, 0)
    //终点
    context.lineTo(100, 100)
    //绘制
    context.stroke()
</script>

4.canvas绘制圆
context.arc(x,y,r,sAngle,eAngle,counterclockwise)
参数描述
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

<script>
        // 1.0 创建画板
        var canvas = document.getElementById('deng')
        // 2.0 准备画笔（获得上下文对象）
        var context = canvas.getContext('2d')
        // 设置宽高
        canvas.width = 900
        canvas.height = 700
        canvas.style.border = "2px solid rgb(37, 187, 179)"
        context.beginPath();
        context.arc(95, 50, 40, 0, 2 * Math.PI);
        context.stroke();

    </script>

5.canvas绘制矩形

<script>
        // 1.0 创建画板
        var canvas = document.getElementById('deng')
        // 2.0 准备画笔（获得上下文对象）
        var context = canvas.getContext('2d')
        // 设置宽高
        canvas.width = 900
        canvas.height = 700
        canvas.style.border = "2px solid rgb(37, 187, 179)"
        //绘制一个填充的矩形
        context.beginPath();
        context.fillRect(20, 20, 150, 100);
        context.stroke();
        //绘制一个矩形
        context.rect(100, 100, 150, 100);
        context.stroke();

    </script>

6.canvass绘制路径（例：三角形）
beginPath() 方法开始一条路径，或重置当前的路径。
提示：请使用这些方法来创建路径 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc()。

 <script>
        // 1.0 创建画板
        var canvas = document.getElementById('deng')
        // 2.0 准备画笔（获得上下文对象）
        var context = canvas.getContext('2d')
        // 设置宽高
        canvas.width = 900
        canvas.height = 700
        canvas.style.border = "2px solid rgb(37, 187, 179)"

        context.beginPath();
        context.moveTo(50, 50);
        context.lineTo(200, 50);
        context.lineTo(200, 200);
        context.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
        context.stroke(); //描边。stroke不会自动closePath()

    </script>

7.绘制图片
创建元素

var img = new Image();   // 创建一个<img>元素
img.src = 'myImage.png'; // 设置图片源地址

脚本执行后图片开始装载
绘制img

//参数1：要绘制的img  参数2、3：绘制的img在canvas中的坐标
context.drawImage(img,0,0);

注意：

考虑到图片是从网络加载，如果 drawImage 的时候图片还没有完全加载完成，则什么都不做，个别浏览器会抛异常。所以我们应该保证在 img 绘制完成之后再 drawImage。

var img = new Image();   // 创建img元素
img.onload = function(){
  context.drawImage(img, 0, 0)
}
img.src = 'myImage.png'; // 设置图片源地址

7.添加样式和颜色
在前面的绘制矩形章节中，只用到了默认的线条和颜色。
如果想要给图形上色，有两个重要的属性可以做到。

7.1-设置图形的填充颜色

  fillStyle = color

7.2-设置图形轮廓的颜色

  strokeStyle = color

7.3fill() 方法

—fill() 方法填充当前的图像（路径）。默认颜色是黑色。

全方位老邓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas基本使用

标题：canvas基本大全1.canvas是什么？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法2.canvas创建画布注意·：默认情况下 (canvas) 元素没有边框和内容<body> <canvas id="chess" width="450px" height="450px"></canvas>&
复制链接

扫一扫

专栏目录