声明一下:这里我不会用太多文字去详解介绍canvas是什么,相信了解过canvas的人都知道它的魅力所在,如果你对canvas还比较陌生的话,建议可以查阅相关资料了解一下。这里我将对canvas绘图详解课程做一次详细的笔记,方便大家和自己日后可以学习。那么接下来就是直接进入笔记内容的学习:
首先创建一个canvas元素,我们只需要在html文件中加入这么一句代码:
%26lt;canvas id="canvas"%26gt;当前浏览器不支持canvas,请更换浏览器使用!%26lt;/canvas%26gt;
同时我们也可以通过canvas的标签属性width和height设置canvas画布的大小:
%26lt;canvas id="canvas" width="800" height="800"%26gt;当前浏览器不支持canvas,请更换浏览器使用!%26lt;/canvas%26gt;
当然,我们也可以通过js来设置canvas的宽高,下文会提到如何设置。
接下来我们就在js中获取到该canvas元素,然后设置它的宽高,并获取到上下文的环境:
var canvas = document.getElementById("canvas");//获取到canvas元素 //设置宽高 canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d");//获取上下文的环境
接下来我们的所有操作都是基于这个context的上下文环境。
现在画一条简单的直线:
context.moveTo(100,100);
context.lineTo(500,500);
moveTo()方法表示一次绘制的起点坐标,lineTo()表示基于上一个坐标点到这个坐标点之间的直线连接。
注意的是,canvas是基于状态的绘制,而不是基于对象的绘制。所以,上面代码都是状态的设置,我们还需要使用stroke()方法进行绘制:
context.stroke();//绘制
除此之外,我们还可以设置线条的一些基本属性:
context.lineWidth = 8;//线条的宽度 context.strokeStyle = "#333";//线条的颜色
一个简单的绘制一条直线的完整例子:
var canvas = document.getElementById("canvas");//获取到canvas元素 //设置宽高 canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d");//获取上下文的环境 //canvas 是基于状态的绘制,而不是对象 context.moveTo(100,100); context.lineTo(500