一、一些概念
1、canvas坐标
canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸。左上角坐标是x=0，y=0的点称作原点。
2、canvas中所有的操作都是通过上下文对象来完成的，我们实际操作的是画布所提供的上下文对象。对上下文的很多操作都不会立即反映到页面上，只有当对路径应用绘制(stroke)或填充(fill)方法时，结果才会显示出来。
二、应用:在canvas中绘制一条对角线
<!DOCTYPE html>
<html>
<!--在页面中加入Canvas-->
<canvas id="diagonal" width="200" height="200" style="border:1px solid;"></canvas>
<!--在canvas中绘制一条对角线-->
<script>
//取得canvas元素及其绘图上下文
var canvas=document.getElementById('diagonal');
var context=canvas.getContext('2d');
//使用普通方法创建对角线
function drawDiagonal()
{
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70,140);
context.lineTo(140,70);
//将这条线绘制到canvas上
context.stroke();
}
//使用变换创建对角线
function drawDiagonal2()
{
//保存当前绘图状态(在变换前保存context状态可以方便以后恢复)
context.save();
//向右下方移动绘图上下文(当平移行为发生时,我们提供的变换坐标会被加到结果坐标上)
context.translate(70,140);
//以原点为起点绘制与前面相同的线段
context.beginPath();
context.moveTo(0,0);
context.lineTo(70,-70);
//将这条线绘制到canvas上
context.stroke();
//恢复原有的绘图状态
context.restore();
}
window.addEventListener("load",drawDiagonal2,true);
</script>
</html>
777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
