canvas中的moveTo(x,y)lineTo(x,y);一直不清楚这两个函数的坐标和方向是怎么表示的,比如下面这个例子:
function mycanvas()
{
var c=document.getElementById("mycanvas");
var ctxt=c.getContext("2d");
ctxt.beginPath();
ctxt.moveTo(10,50);
ctxt.lineTo(100,50);
ctxt.lineTo(100,150);
ctxt.lineTo(10,50);
ctxt.stroke();
}
window.onload=mycanvas;
求指导啊,谢谢~~~~
默认情况下,不做canvas 的坐标变换,左上角是(0,0)然后水平向右是 x轴正方向,向下是y轴正方向。所以说默认右下角的坐标是(width,height) 其中 width和height是你在写canvas标签的时候的width和height属性,这两个属性和css中的width和 height也是不一样的。
CSS中的这两个属性定义的是显示的大小,而canvas标签中的这两个属性定义的就是右下角的坐标值。当然如果不定义CSS中的width和height默认的canavs大小就是这个两个参数定义的,单位像素。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。