本篇博客是向大家介绍Html5中的canvas(画布)和如何在画布上画一条线段。
何为canvas:根据其中文意思—画布,我们很容易明白它是用于支持画笔图画的载体。只不过在这里的画布是一个矩形区域,我们通过控制矩形区域中的每一个像素实现绘图。具体的说,html5的canvas元素通过使用JavaScript在网页上绘制图像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas</title>
<style>
#myc{
border:1px solid rgba(200,0,0,0.5);
display:block;/*注释一*/
margin:auto;
}
</style>
</head>
<body>
<canvas id="myc"></canvas>
<script>
var c=document.getElementById("myc"); //注释二
c.width=200;
c.height=100;
var cxt=c.getContext("2d"); //注释三
var x=50,y=30,w=40;
cxt.moveTo(x,y); //注释四
cxt.lineTo(x+w,y);
cxt.lineWidth=20;
cxt.strokeStyle="#fff000";
cxt.lineCap="round"; //注释五
cxt.stroke(); //注释六
</script>
</body>
</html>
通过上面的代码我们来具体学习canvas:
1、canvas是行内元素,所以如果我们想给他设置margin属性,就要先通过display属性将他转变成块元素,如注释一所示。
2、canvas便签在定义宽度和高度时有两种定义方法,一种是直接在便签内设置宽度和高度的属性, 另一种则如注释二,用js方法,使用id来寻找canvas元素,然后设置他的宽度和高度。
3、注释三的代码是创建context对象,通俗来说是定义画笔,为之后的绘图做准备。getElementById(“2d”)对象是内建的html5对象,返回一个用于在画布上绘图的环境,2d表示二维绘图。
4、注释四moveTo(x,y)是定义一个坐标为(x,y)的坐标;
lineTo(x+w,y)是定义一个终点为(x+w,y)的坐标。
5、注释五是设置线段两端的线帽形状,它可设置的值有三个:
(1)butt:这个默认值指定了线段应该没有线帽。线条的末点是平直的而且和线条的方向正交,这条线段在其端点之外没有扩展。
(2)round:这个值指定了线段应该带有一个半圆形的线帽,半圆的直径等于线段的宽度,并且线段在端点之外扩展了线段宽度的一半。
(3)square:这个值表示线段应该带有一个矩形线帽。这个值和 “butt” 一样,但是线段扩展了自己的宽度的一半。
6、注释六这行代码必不可少,他是一个方法用于绘制描边,如果不写它,就算前面写的在完美,线段在好看,都不能呈现在画布上。