搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > HTML5 > 正文

HTML5 画布canvas如何使用方法

发布时间：2022-12-31 09:38:06 来源：网络
.
风抚弄着庄稼，时而把它吹弯，时而把它扬起，仿佛大地在进行有节奏的呼吸，那一档档成熟的小麦也都有了生命，风从那边来，传来麦穗与麦穗间的细语。

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

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

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

下面来做几个示例：

1、填充画布

JavaScript Code复制内容到剪贴板
  1. <canvasid="myCanvas"width="200"height="100"style="border:1pxsolidred;"></canvas>
  2. <scripttype="text/javascript">
  3. varc=document.getElementById("myCanvas");
  4. varcxt=c.getContext("2d");
  5. cxt.fillStyle="#ccc";
  6. cxt.fillRect(5,10,150,60);//x，y，x，y
  7. </script>

执行如下：

2、获取坐标

JavaScript Code复制内容到剪贴板
  1. <scripttype="text/javascript">
  2. functioncnvs_getCoordinates(e){
  3. x=e.clientX;
  4. y=e.clientY;
  5. document.getElementById("xycoordinates").innerHTML="Coordinates:("+x+","+y+")";}
  6. functioncnvs_clearCoordinates(){
  7. document.getElementById("xycoordinates").innerHTML="";}
  8. </script>
XML/HTML Code复制内容到剪贴板
  1. <divid="coordiv"style="float:left;width:199px;height:99px;border:1pxsolid#c3c3c3"onmousemove="cnvs_getCoordinates(event)"onmouseout="cnvs_clearCoordinates()"></div>
  2. <divid="xycoordinates"></div>

执行如下：

3、绘制线条、图形

1）、绘制正方形如下：

JavaScript Code复制内容到剪贴板
  1. <canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">
  2. 您的浏览器不支持canvas标签.
  3. </canvas>
  5. <scripttype="text/javascript">
  7. varc=document.getElementById("myCanvas");
  8. varcxt=c.getContext("2d");
  9. cxt.moveTo(10,10);//x,y起点
  10. cxt.lineTo(10,50);//x,y
  11. cxt.lineTo(50,50);//x,y
  12. cxt.lineTo(50,10);//x,y
  13. cxt.lineTo(10,10);//x,y
  14. cxt.stroke();
  15. </script>

执行如下

2）、绘制圆形如下：

JavaScript Code复制内容到剪贴板
  1. <canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">
  2. 你的浏览器不支持canvas
  3. </canvas>
  5. <scripttype="text/javascript">
  6. varc=document.getElementById("myCanvas");
  7. varcxt=c.getContext("2d");
  8. cxt.fillStyle="#ccc";
  9. cxt.beginPath();
  10. cxt.arc(20,20,10,0,Math.PI*2,true);
  11. cxt.closePath();
  12. cxt.fill();
  13. </script>

执行如下：

4、绘制渐变

JavaScript Code复制内容到剪贴板
  1. <canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">
  2. 您的浏览器不支持canvas标签.
  3. </canvas>
  5. <scripttype="text/javascript">
  6. varc=document.getElementById("myCanvas");
  7. varcxt=c.getContext("2d");
  8. vargrd=cxt.createLinearGradient(0,0,175,50);
  9. grd.addColorStop(0,"#000000");//黑
  10. grd.addColorStop(1,"#FFFFFF");//白
  11. cxt.fillStyle=grd;
  12. cxt.fillRect(5,10,175,50);//x,y,x,y
  13. </script>

执行如下：

5、图片

JavaScript Code复制内容到剪贴板
  1. <canvasid="myCanvas"width="300"height="200"style="border:1pxsolid#c3c3c3;">
  2. 您的浏览器不支持canvas标签.
  3. </canvas>
  5. <scripttype="text/javascript">
  6. varc=document.getElementById("myCanvas");
  7. varcxt=c.getContext("2d");
  8. varimg=newImage()
  9. img.src="aa.png"
  10. cxt.drawImage(img,10,20);//x,y
  11. </script>

执行如下：

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

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

以下您可能有感兴趣的文章:
标签： canvas
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图