初识Canvas

最新推荐文章于 2024-07-19 10:24:06 发布

JillYu

最新推荐文章于 2024-07-19 10:24:06 发布

阅读量492

点赞数

分类专栏： HTML 文章标签： html5 canvas

本文链接：https://blog.csdn.net/Jill6693484/article/details/54667520

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、Canvas的浏览器支持

canvas的浏览器支持

毫无疑问，IE9之前的版本不支持Canvas。如果你接受这个现实，那么可以在canvas元素的后备内容中添加一条友好的提示消息，告诉使用IE9之前的用户应该升级他们的浏览器。另外也可以引入由Google团队开发的ExplorerCanvas脚本，使之能够在IE9之前的版本上正常运行
可以点击这里查看更多的html5浏览器支持哦

二、认识canvas元素

与video和audio类似，canvas元素完全不需要任何外部插件就能够运行，你只需使用HTML5并使用2D渲染上下文API。术语不明白的很快你就会明白，先放过，我们先来创建一个canvas元素，如下

<canvas></canvas>
<canvas width="400" height="200"></canvas>

目前，在创建canvas元素时，需要特别注意width和height属性。这两个属性明确定义了canvas元素的尺寸，从而相应的定义了2D渲染上下文的尺寸，上面代码实现如下

认识canvas元素

三、2D渲染上下文

canvas元素并非Canvas中最强大的部分，真正的关键部分是2D渲染上下文，这是真正绘制图形的地方。canvas的用途只是作为作为2D渲染上下文的包装器，它包含绘图和图形操作所需要的全部方法和丰富功能

1、坐标系统

2D渲染上下文是一种基于屏幕的标准绘图平台。它采用平面的笛卡尔坐标系统，左上角为原点(0,0)。向右移动时，x坐标值会增加；向下移动时，y坐标值会增加。如下

四、访问2D渲染上下文

暂不解释这个概念，先来使用一下，下面的代码进行详细的备注

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识canvas2</title>
    <style>
        /*canvas元素的位置是由它在HTML文档的位置决定的。可以根据需要使用css移动，与移动其他HTML元素相同*/
        #canvas2{
            /*为了更直观，给canvas元素宽高并加上边框*/
            border:1px solid #666;
        }
    </style>
</head>
<body>
<canvas id="canvas2" width="500" height="500"></canvas>
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        // 将canvas元素赋值给一个变量
        var canvas = $('#canvas2');
        // 调用getContext方法得到2d渲染上下文 赋给另一个变量
        var context = canvas.get(0).getContext("2d");
        //从这里开始 可以绘图啦
        context.fillRect(0,0,100,100);
    })
</script>
</body>
</html>

上面代码实现如下：

访问2D渲染上下文

正如你所见，绘制一个正方形是很简单的，只需一行代码。下面我们一起来绘制更多的图形和线条

五、绘制基本图形和线条

1、绘制矩形

创建一个矩形需要输入4个参数。前面两个参数是矩形原点(左上角)的(x,y)坐标值，其余两个参数是矩形的宽度和高度。
即：context.fillRect(x,y,width,height);

与fillRect相对应的是strokeRect，fillRect绘制一个矩形并给他填充颜色(即实心)，strokeRect则绘制一个矩形并给他绘制边框(即空心)

2、绘制线条

绘制线条与绘制图形有一些区别。它们实际上成为路径。要绘制一个简单的路径，需要5个步骤，4个参数路径原点坐标值和路径终点坐标值。

//开始路径
context.beginPath();
//设置路径原点
context.moveTo(x,y);
//设置路径终点
context.lineTo(x1,y1);
//结束路径
context.closePath();
//绘出路径轮廓
context.stroke();

3、绘制圆形

圆形是一个非常复杂的形状，因此Canvas实际上并没有专门绘制圆形的方法。但是有一个方法可以绘制圆弧，圆弧实际上是圆形的组成部分——首尾相连的圆弧就是圆形。

创建一个圆弧需要4个步骤，6个参数：圆弧原点的(x,y)坐标值、圆弧半径、开始角度、结束角度和一个布尔值，如果圆弧按逆时针方向绘制，布尔值为true，否则为false

//开始路径
context.beginPath();
//绘制一个圆形
context.arc(x,y,radius,startAngle,endAngle,anticlockwise);
//结束路径
context.closePath();
//填充路径，fill是与stroke类似的方法
context.fill();

一定要注意，Canvas中的角度是以弧度而不是角度为单位的。简单的说，360度(即一个完整的圆)是2π弧度

角度换算弧度，可以按以下公式进行换算

//1度
var degrees = 1;
//0.0175弧度
var radians = degrees * (Math.PI/180);

六、样式

1、更改色值

//可以使用任何有效的css色值
context.fillStyle = "rbg(255,0,0)";
context.fillStyle = "#f00";
context.fillStyle = "red";

2、修改线宽

//lineWidth属性默认值为1
context.lineWidth = 5;//加粗线条

3、修改字号和字体

//默认文本设置是10px sans-serif，非常小
context.font = "30px serif";

七、绘制文本

Canvas不仅能绘制图形，还能够显示文本。老实说，与使用传统html元素创建文本相比，使用Canvas绘制文本通常并不是好办法，因为Canvas中的文本是以图像形式绘制的，这意味它无法用鼠标指针选取、无法编辑(除非先擦除文字，再重新绘制)

Canvas绘制文本

var text = "Welcome to jill's blog"
context.fillText(text,x,y);
//描边文本
context.strokeText(text,x,y);

八、擦除Canvas

在Canvas上绘制确实是很有趣的事情，但是当你画错了或是想要清除画布和绘制其他图形时，应该如何做呢？

clearRect方法擦除，clearRect方法需要4个参数：Canvas的原点坐标(x,y)，宽度和高度调用clearRect

context.clear(x,y,w,h);
//擦除整个画布
context.clearRect(x,y,canvas.width(),canvas.height());
//也可以部分擦除，下面会有例子

九、使Canvas填满浏览器窗口

对于普通的HTML元素，想要将它填满整个浏览器窗口，可以将width和height属性设置为100％，就可以满足需求了。然而，canvas元素并不支持这种方法，它会忽略百分比，将100％解释为100像素，那如果我们想要将canvas填满整个浏览器，该怎么做呢？

最简单的方法是将canvas元素的宽度和高度精确设置为浏览器窗口的宽度和高度，可以使用window浏览器对象和jQuery方法获取窗口的宽度和高度

var canvas  = $('#canvas2');
var context = canvas.get(0).getContext("2d");

canvas.attr("width",$(window).get(0).innerWidth);
canvas.attr("height",$(window).get(0).innerHeight);

context.fillRect(0,0,canvas.width(),canvas.height());

你会发现这种方法实际上并非完全正确，因为canvas元素和浏览器旁边还会有一个白色的空隙，如下
使Canvas填满浏览器窗口

要解决这个问题，我们需要使用一些css

//css文件
*{margin:0;padding:0;}
html,body{height:100%;width:100%;}
canvas{display:block;}

但是还有问题要解决。如果你调整浏览器窗口大小，canvas元素仍然会保持原来的尺寸，这样，如果窗口缩小过多就会显示滚动条。

为了解决这个问题，需要在调整浏览器窗口大小的同时调整canvas元素的大小。jquery有个resize方法，完全满足需求

//调整浏览器窗口大小的同时调整canvas元素的大小
$(window).resize(resizeCanvas);
//使Canvas填满浏览器窗口
resizeCanvas();
function resizeCanvas() {
   canvas.attr("width", $(window).get(0).innerWidth);
   canvas.attr("height", $(window).get(0).innerHeight);
   context.fillRect(0, 0, canvas.width(), canvas.height());
}

JillYu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Canvas

一、Canvas的浏览器支持毫无疑问，IE9之前的版本不支持Canvas。如果你接受这个现实，那么可以在canvas元素的后备内容中添加一条友好的提示消息，告诉使用IE9之前的用户应该升级他们的浏览器。另外也可以引入由Google团队开发的ExplorerCanvas脚本，使之能够在IE9之前的版本上正常运行可以点击这里查看更多的html5浏览器支持哦二、认识canvas元素与video和aud
复制链接

扫一扫

专栏目录