您的位置:首页 > Web前端 > JavaScript

01. 如何创建一个canvas并画一条线段

2016-07-05 14:27 211 查看
canvas是html5的新特性,提供绘画api给javascript来将一些效果绘制在一块画布上。用一些简单的canvas知识就可以做出很绚丽的效果。

首先,在一个新建的html中添加一个画布:

<canvas id="canvas"></canvas>

然后在javascript中对这个画布进行一些初始化设置:

var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
context返回一个表示用来绘制的环境类型的环境,是画图过程中很重要的东西。
接下来设置画布的宽高:canvas.width=1024;
canvas.height=768;这样一个基本的canvas环境已经初始化好了。
画一条直线:

context.moveTo(x,y);
context.lineTo(x,y);
context.stroke();moveTo的方法是指绘画的图形的起点(坐标形式),lineTo是指图形的终点,stroke()就是绘制当前路径的边框。
这样一条简单的线段就完成了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  canvas javascript html5