Canvas学习记录

最新推荐文章于 2024-04-08 19:19:50 发布

Dreamy.TZK

最新推荐文章于 2024-04-08 19:19:50 发布

阅读量462

点赞数

分类专栏： Canvas

本文链接：https://blog.csdn.net/sviptzk/article/details/108582508

版权

Canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Canvas的基本用法

canvas元素

<canvas id="tutorial" width="150" height="150"></canvas>

canvas元素与img元素相似，但其没有src属性和alt属性。其只有两个属性width（默认值300像素）和height（默认值150像素）。如果没有为其设置宽度和高度时，那么将初始化为默认大小。

该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。

id属性和class属性为所有HTML元素共有的，因此可以对canvas使用。

兼容性

替代内容

所谓替代内容也就是当浏览器无法正常显示canvas时用于替换的内容。

<!-- 初始宽度300像素 高度150像素  -->
<canvas id="stockGraph" width="150" height="150">
    <!-- 当浏览器兼容canvas时不显示里面的内容，不兼容时则显示其内容 -->
    current stock price: $3.15 +0.15
</canvas>

编程性兼容

因为canvas是由js控制的，因此需要判断当前浏览器是否支持canvas。

var canvas = document.getElementById('stockGraph')
// 判断当前浏览器是否兼容canvas
if (canvas.getContext) {
    // canvas被支持
    var ctx = canvas.getContext('2d')
    } else {
        // canvas不被支持
    }

渲染上下文

canvas元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

一个简单的demo

<html>
    <head>
        <script type="application/javascript">
            function draw() {
                var canvas = document.getElementById("canvas");
                if (canvas.getContext) {
                    var ctx = canvas.getContext("2d");

                    ctx.fillStyle = "rgb(200,0,0)";
                    ctx.fillRect (10, 10, 55, 50);

                    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
                    ctx.fillRect (30, 30, 55, 50);
                }
            }
        </script>
    </head>
    <body onload="draw();">
        <canvas id="canvas" width="150" height="150"></canvas>
    </body>
</html>

使用canvas来绘制图形

绘制矩形

canvas提供了三种方法绘制矩形

fillRect(x,y,width,height)

绘制一个填充的矩形
strokeRect(x,y,width,height)

绘制一个矩形的边框
clearRect(x,y,width,height)

x与y表示距页面左上角的距离

<html>

    <head>
        <script type="application/javascript">
            function draw() {
                var canvas = document.getElementById('canvas');
                if (canvas.getContext) {
                    var ctx = canvas.getContext('2d');
                    /*
                    (X,Y,width,height)
                */
                    // 绘制边长为100px的黑色正方形
                    ctx.fillRect(0, 0, 100, 100);
                    // 从正方形的中心开始擦除了一个60*60px的正方形
                    ctx.clearRect(20, 20, 60, 60);
                    // 在清除区域内生成一个50*50的正方形边框。
                    ctx.strokeRect(25, 25, 50, 50);
                }
            }
        </script>
    </head>

    <body onload="draw();">
        <canvas id="canvas" width="150" height="150"></canvas>
    </body>

</html>

绘制路径

绘制路径的基本步骤：

首先，你需要创建路径起始点。
然后你使用画图命令去画出路径。
之后你把路径封闭。
一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

所要用到的函数：

beginPath()

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath()

闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()

通过线条来绘制图形轮廓。
fill()

通过填充路径的内容区域生成实心的图形。

移动笔触

moveTo(x,y)

将笔触移动到指定的坐标x以及y上。

对于这个函数可以想象一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。

当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。我们也能够使用moveTo()绘制一些不连续的路径。

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false);   // 口(顺时针)
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
    ctx.stroke();
  }
}

线

lineTo(x,y)

绘制一条从当前位置到指定x以及y位置的直线。

圆弧

arc(x,y,radius,startAngle,endAngle,anticlockwise)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向
arcTo

根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:

弧度=(Math.PI/180)*角度。

<html>

<head>
    <script type="application/javascript">
        function draw() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');

                ctx.beginPath();
                // 下半圆
                ctx.arc(175, 75, 50, 0, Math.PI * 1, false);
                // 上半圆
                ctx.arc(75, 75, 50, 0, Math.PI * 1, true);
                // 圆
                ctx.arc(275, 75, 50, 0, Math.PI * 2, true)

                ctx.fill()
            }
        }
    </script>
</head>

<body onload="draw();">
    <canvas id="canvas" width="850" height="150"></canvas>
</body>

</html>