新手如何5分钟学会用canvas在HTML5上画简单图形

最新推荐文章于 2024-05-10 10:10:22 发布

weixin_41881671

最新推荐文章于 2024-05-10 10:10:22 发布

阅读量2.9k

点赞数 1

分类专栏： html5

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML5中的另一个新元素是标签。需要使用JavaScript来操作和绘制画布。
canvas元素为脚本提供了一个依赖于分辨率的位图画布，它可以用于呈现图形、游戏图形或其他可视图像。
当一个更合适的元素可用时，作者不应该在文档中使用canvas元素。例如，使用canvas元素来呈现页面标题是不合适的：如果想要显示标题的图形是强烈的，那么应该使用适当的元素（通常是h1）进行标记，然后使用CSS和诸如XBL这样的支持技术进行样式化。
当作者使用canvas元素时，他们还必须提供内容，当呈现给用户时，它本质上与位图画布传达了相同的功能或目的。这个内容可以作为画布元素的内容。画布元素的内容，如果有的话，是元素的反馈内容。
在交互式可视媒体中，如果为canvas元素启用了脚本，并且如果支持canvas元素，canvas元素表示内含由动态创建的图像组成的嵌入式内容。
注：在非交互式、静态视觉媒体,如果之前已经画在画布元素(例如:如果页面在交互式媒介下浏览，并且正在打印，或者一些脚本正在页面中运行，此时页面正在画某元素)，画布元素代表与当前图像嵌入的内容和大小。否则，元素代表元素的反馈内容。在非可视介质中和可视介质中，如果为canvas元素禁用了脚本，或者对canvas元素的支持被禁用，则画布元素代表元素的反馈内容。
canvas元素有两个属性来控制坐标空间的大小：width宽度和height高度。这些属性，在指定的时候，必须具有有效的非负整数的值。必须使用解析非负整数的规则来获得它们的数值。如果丢失了一个属性，或者解析它的值返回一个错误，那么必须使用默认值。宽度属性默认为300，高度属性默认为150。
画布元素的内在维度等于坐标空间的大小，维度数值为用CSS像素解释的数字。元素大小可以被样式表stylesheet任意设置。在渲染过程中，图像可以伸缩以适应这个canvas画布的大小。
坐标空间的大小并不一定表示用户屏幕将在内部或渲染期间使用的实际位图的大小。例如，在高清晰度显示器上，用户屏幕可以在内部使用一个位图，每个单元在坐标空间中使用两个设备像素，这样渲染在整个过程中保持高质量。
注：
当创建canvas元素时，当设置宽度和高度属性时（无论是新值还是旧值），位图和任何相关上下文必须被清除回初始状态，并使用新指定的坐标空间维度重新初始化。
当画布初始化时，它的位图必须被清除为透明（屏幕显示为黑色）。
宽度和高度IDL属性必须反映相同名称的各自内容属性，具有相同的缺省值。
需要使用JavaScript来操作和绘制画布。
画布元素一个id属性，这样您就可以通过编程从JavaScript代码中访问它（或者如果您使用的是jQuery，并且它是页面上惟一的画布，您可以使用$（’canvas’）来访问它，而不需要命名它）。
您也可以（可选地）为画布指定一个高度和宽度。在画布和画布之间，您可以指定一些文本，以显示在不支持canvas元素的浏览器中。
下面是一个使用canvas来绘制的简单示例。

您可能想要给画布元素一个id属性，这样您就可以通过编程从JavaScript代码中访问它（或者如果您使用的是jQuery，并且它是页面上惟一的画布，您可以使用$（’canvas’）来访问它，而不需要命名它）。
您也可以（可选地）为画布指定一个高度和宽度。在画布和画布之间，您可以指定一些文本，以显示在不支持canvas元素的浏览器中。

以画苏格兰的旗帜为例：
这里写图片描述

首先，创建实际的画布，并给它一个“myCanvas”的ID。如果在不支持HTML5 canvas元素的浏览器中查看此代码，则会显示“您的浏览器不支持canvas标记”，而不是绘制标志。
< canvas id=”myCanvas” >
Your browser does not support the HTML5 canvas tag.
< /canvas >

接下来，写一个脚本。
< script type=”text/javascript” >

canvas标签只是图形的容器;您必须使用JavaScript来实际绘制和呈现图形。
首先，使用“myCanvas”ID获取画布的引用，
var c = document.getElementById(“myCanvas”);

然后获得画布的上下文，它提供了绘制和操纵画布上图形的方法/属性。指定了“2d”来使用二维上下文来绘制页面。
var ctx = c.getContext(“2d”);

然后，画出蓝色的矩形。用填充色来指定蓝色。
ctx.fillStyle = “#0066CC”;

使用矩形来绘制矩形，指定大小和位置。调用fillRect（0,0,125，75）意味着：从位置（0，0）开始——左上角——画一个宽度=125像素的矩形，高度=75像素。
ctx.fillRect(0, 0, 125, 75);

最后，在国旗上画出白色的X。首先调用开始路径来开始绘制路径的过程。
ctx.beginPath();

我指定了15个像素的线宽（使用猜测和检查的方法来尝试不同的值，直到它看起来是正确的），
ctx.lineWidth = “15”;

以及一个“白色”的小标题，使路径的颜色变白。
ctx.strokeStyle = “white”;

然后用moveTo和lineTo来追踪这条路径。这些方法放置一个“光标”，供绘图;不同之处在于，moveTo移动光标而不画线，lineTo在移动时画一条线。从移动到位置（0,0）——左上角——
ctx.moveTo(0, 0);

然后画一条线到（125，75）——右下方的角落。
ctx.lineTo(125, 75);

然后移动到位置（125，0）——右上角
ctx.moveTo(125, 0);

——然后画一条线到（0，75）——左下方的角
ctx.lineTo(0, 75)。

最后，描边方法实际上呈现了这些笔画。
ctx.stroke();

完整代码如下：

<!DOCTYPE html>
<html>
<body>

    <canvas id="myCanvas">
        Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script type="text/javascript">

        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#0066CC";
        ctx.fillRect(0, 0, 125, 75);

        ctx.beginPath();
        ctx.lineWidth = "15";
        ctx.strokeStyle = "white";  
        ctx.moveTo(0, 0);
        ctx.lineTo(125, 75);
        ctx.moveTo(125, 0);
        ctx.lineTo(0, 75);

        ctx.stroke();  


    </script>

</body>
</html>

这里写图片描述

weixin_41881671

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
新手如何5分钟学会用canvas在HTML5上画简单图形

HTML5中的另一个新元素是标签。需要使用JavaScript来操作和绘制画布。 canvas元素为脚本提供了一个依赖于分辨率的位图画布，它可以用于呈现图形、游戏图形或其他可视图像。当一个更合适的元素可用时，作者不应该在文档中使用canvas元素。例如，使用canvas元素来呈现页面标题是不合适的：如果想要显示标题的图形是强烈的，那么应该使用适当的元素（通常是h1）进行标记，然后使用CSS和...
复制链接

扫一扫

专栏目录