在Canvas上画线,将使用以下两种方法:moveTo(x,y) 定义线条开始坐标;lineTo(x,y) 定义线 条结束坐标;绘制线条必须使用到"ink"的方法,就像stroke().
【案例2-4】:用moveTo()绘制Canvas线条
<script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script> 代码运行效果如图2-6所示
参数值如表 参数值如表2-6 2-6所示。 所示。
参数 x 描述 矩形左上角的 x 坐标。
程序运行效果如图2-9所示。
y
width height
矩形左上角的 y 坐标。
矩形的宽度,以像素计。 矩形的高度,以像素计。
}
function cnvs_clearCoordinates() { document.getElementById("xycoordinates").innerHTML=""; } 程序运行效果如图2-4所示。
画布的X和Y坐标用于在画布上对绘画进行定位。鼠标移动 的矩形框上,显示定位坐标。
【案例2-6】:使用moveTo与lineTo绘制复杂图形
<script>
function draw(id){ var canvas = document.getElementById(id); var context = canvas.getContext("2d"); context.fillStyle = "#eeeeef"; //设置绘图区域颜色 context.fillRect(0,0,300,400); //画矩形