|
<canvas>你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>
<input type="button" value="画三角"/>
<input type="button" value="清除"/>
绘制三角形
复制代码 代码如下:
<script type="text/javascript">
function drawTri(){
var canvas = document.getElementById('test2');
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
function clearTri(){
var canvas = document.getElementById('test2');
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,200,200);
}
</script>
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
六、半个单位的坐标
里还要回过头来说说坐标，下面的代码是在画布上绘制网格，点击“画网格”按钮可以看见效果
设置画布
复制代码 代码如下:
<canvas>你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>
<input type="button" value="画三角"/>
<input type="button" value="清除"/>
绘制三角形
复制代码 代码如下:
<script type="text/javascript">
function drawTri(){
var canvas = document.getElementById('test2');
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
function clearTri(){
var canvas = document.getElementById('test2');
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,200,200);
}
</script>
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
这段代码中，有一处奇怪的地方，就是坐标循环是从0.5开始的，这是为什么呢？
如下图，假如我想绘制一条从(1,0)到(1,3)的线，由于线的默认宽度是一个像素，所以在我想象中应该绘制成深绿色的部分，即在坐标 1 两边各占半个像素的宽度。
然而，浏览器的最小单位是一个像素，所以他会向两边扩展，实际绘制出来的浅绿色的部分，即占用了两个像素的宽度。这样，我们绘制的线条在坐标上就不精确了
如下图，如果我们给出的起始坐标是(1.5,0)和(1.5,3)，那么线条的宽度才是正确的一个像素。
七、清空画布
上面给出的两段代码中，我们都用到了清空画布，用到的方法如下：
clearRect(x,y,width,height)：
它接受四个参数， x 和 y 指定矩形左上角(相对于原点)的位置，width 和 height 是矩形的宽和高。调用该方法会将给出的矩形区域中所有绘制图形都清空，露出画布的背景 （编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
