2016-06-13 |
我们如何使用Canvas来画一条简单的线？
答案:
解释:
定义Canvas区域你需要使用下面的HTML代码，这定义了你能进行绘图的区域
<canvas id="mycanvas" width="600" height="500" style="border:1px solid #000000;"></canvas>
获取画布区域的访问
在画布上进行绘图我们首先需要获取上下文区域的关联，下面是获取画布区域的代码。
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");
绘制图形
现在一旦你获取了访问上下文，我们就可以开始在上下文中绘制了。首先调用“move”方法并从一个点开始，使用线条方法绘制线条然后使用stroke方法结束。
ctx.moveTo(10,10);
ctx.lineTo(200,100);
ctx.stroke();
以下是完整的代码
<body onload="DrawMe();">
<canvas id="mycanvas" width="600" height="500" style="border:1px solid #000000;"></canvas>
</body>
<script>
function DrawMe()
{
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(200,100);
ctx.stroke();
}
你可以得到以下输出
- 定义Canvas区域
- 获取访问canvas上下文区域
- 绘制图形
定义Canvas区域你需要使用下面的HTML代码，这定义了你能进行绘图的区域
<canvas id="mycanvas" width="600" height="500" style="border:1px solid #000000;"></canvas>
获取画布区域的访问
在画布上进行绘图我们首先需要获取上下文区域的关联，下面是获取画布区域的代码。
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");
绘制图形
现在一旦你获取了访问上下文，我们就可以开始在上下文中绘制了。首先调用“move”方法并从一个点开始，使用线条方法绘制线条然后使用stroke方法结束。
ctx.moveTo(10,10);
ctx.lineTo(200,100);
ctx.stroke();
以下是完整的代码
<body onload="DrawMe();">
<canvas id="mycanvas" width="600" height="500" style="border:1px solid #000000;"></canvas>
</body>
<script>
function DrawMe()
{
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(200,100);
ctx.stroke();
}
你可以得到以下输出
html5新特性
cavas与svg
web存取与离线
html5表单