canvas教程

Canvas学习札记(二)-绘图(矩形)

字号+ 作者:H5之家 来源:H5之家 2017-09-07 13:32 我要评论( )

Canvas学习笔记(二)--绘图(矩形) 1、canvas网格坐标 ?左上角为坐标原点(0,0),横轴X向右坐标值增大,纵轴Y向下坐标值增大。坐标系中所有物体的位置都相对于这个原点。如图所示,蓝色方块的位置距左边x像素,距上面y像素,坐标为(x,y)。 ? 2、绘制矩形 ? fi

Canvas学习笔记(二)--绘图(矩形)

1、canvas网格坐标



?左上角为坐标原点(0,0),横轴X向右坐标值增大,纵轴Y向下坐标值增大。坐标系中所有物体的位置都相对于这个原点。如图所示,蓝色方块的位置距左边x像素,距上面y像素,坐标为(x,y)。

?

2、绘制矩形

?

fillRect(x,y,width,height):绘制填充颜色的矩形;

?

strokeRect(x,y,width,height):绘制带有边框的矩形;

?

clearRect(x,y,width,height):清空绘制的矩形区域,并使之透明;

?

参数的含义:

?

X:横坐标的位置;

y:纵坐标的位置;

width:矩形的宽度;

height:矩形的高度;

?

X,Y表示矩形左上角相对于原点(0,0)的位置。

?

矩形演示代码如下:

?

?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .wraper { position: relative; border: 1px solid orange; } </style> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('test'); if(canvas.getContext){ var cxt = canvas.getContext('2d'); cxt.fillRect(5,5,100,100); cxt.clearRect(20,20,50,50); cxt.strokeRect(120,120,70,70); } } </script> </head> <body> <canvas></canvas> </body> </html> ?

?

看看3个方法不同的效果:


?

?

?

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 【HTML5】Canvas标签应用之矩阵变换

    【HTML5】Canvas标签应用之矩阵变换

    2017-09-07 09:13

  • html2canvas将HTML内容写入Canvas生成图片

    html2canvas将HTML内容写入Canvas生成图片

    2017-09-07 09:09

  • c#学习之30分钟学会XAML

    c#学习之30分钟学会XAML

    2017-09-06 12:03

  • (安卓开发技术课件)30Canvas、Paint讲解.pptx

    (安卓开发技术课件)30Canvas、Paint讲解.pptx

    2017-09-05 16:06

网友点评