HTML5 画布canvas如何使用方法

发布时间：2022-12-31 09:38:06 来源：网络

风抚弄着庄稼，时而把它吹弯，时而把它扬起，仿佛大地在进行有节奏的呼吸，那一档档成熟的小麦也都有了生命，风从那边来，传来麦穗与麦穗间的细语。

canvas 元素使用 JavaScript 在网页上绘制图像，本身是没有绘图能力。

canvas 是一个矩形区域，可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面来做几个示例：

1、填充画布

JavaScript Code复制内容到剪贴板

<canvasid="myCanvas"width="200"height="100"style="border:1pxsolidred;"></canvas>
<scripttype="text/javascript">
varc=document.getElementById("myCanvas");
varcxt=c.getContext("2d");
cxt.fillStyle="#ccc";
cxt.fillRect(5,10,150,60);//x，y，x，y
</script>

执行如下：

2、获取坐标

JavaScript Code复制内容到剪贴板

<scripttype="text/javascript">
functioncnvs_getCoordinates(e){
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates:("+x+","+y+")";}
functioncnvs_clearCoordinates(){
document.getElementById("xycoordinates").innerHTML="";}
</script>

XML/HTML Code复制内容到剪贴板

<divid="coordiv"style="float:left;width:199px;height:99px;border:1pxsolid#c3c3c3"onmousemove="cnvs_getCoordinates(event)"onmouseout="cnvs_clearCoordinates()"></div>
<divid="xycoordinates"></div>

执行如下：

3、绘制线条、图形

1）、绘制正方形如下：

JavaScript Code复制内容到剪贴板

执行如下

2）、绘制圆形如下：

JavaScript Code复制内容到剪贴板

执行如下：

4、绘制渐变

JavaScript Code复制内容到剪贴板

执行如下：

5、图片

JavaScript Code复制内容到剪贴板

执行如下：

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html

标签： canvas