canvas 元素使用 JavaScript 在网页上绘制图像,本身是没有绘图能力。
canvas 是一个矩形区域,可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面来做几个示例:
1、填充画布
JavaScript Code复制内容到剪贴板- <canvas id="myCanvas" width="200" height="100" style="border:1px solid red;"></canvas>
- <script type="text/javascript">
- var c=document.getElementById("myCanvas");
- var cxt=c.getContext("2d");
- cxt.fillStyle="#ccc";
- cxt.fillRect(5,10,150,60); //x,y,x,y
- </script>
执行如下:
2、获取坐标
JavaScript Code复制内容到剪贴板- <script type="text/javascript">
- function cnvs_getCoordinates(e){
- x=e.clientX;
- y=e.clientY;
- document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; }
- function cnvs_clearCoordinates(){
- document.getElementById("xycoordinates").innerHTML="";}
- </script>
- <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
- <div id="xycoordinates"></div>
执行如下:
3、绘制线条、图形
1)、绘制正方形如下:
JavaScript Code复制内容到剪贴板- <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
- 您的浏览器不支持 canvas 标签.
- </canvas>
- <script type="text/javascript">
- var c=document.getElementById("myCanvas");
- var cxt=c.getContext("2d");
- cxt.moveTo(10,10); //x,y 起点
- cxt.lineTo(10,50); //x,y
- cxt.lineTo(50,50); //x,y
- cxt.lineTo(50,10); //x,y
- cxt.lineTo(10,10); //x,y
- cxt.stroke();
- </script>
执行如下
2)、绘制圆形如下:
JavaScript Code复制内容到剪贴板- <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
- 你的浏览器不支持canvas
- </canvas>
- <script type="text/javascript">
- var c=document.getElementById("myCanvas");
- var cxt=c.getContext("2d");
- cxt.fillStyle="#ccc";
- cxt.beginPath();
- cxt.arc(20,20,10,0,Math.PI*2,true);
- cxt.closePath();
- cxt.fill();
- </script>
执行如下:
4、绘制渐变
JavaScript Code复制内容到剪贴板- <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
- 您的浏览器不支持 canvas 标签.
- </canvas>
- <script type="text/javascript">
- var c=document.getElementById("myCanvas");
- var cxt=c.getContext("2d");
- var grd=cxt.createLinearGradient(0,0,175,50);
- grd.addColorStop(0,"#000000"); //黑
- grd.addColorStop(1,"#FFFFFF"); //白
- cxt.fillStyle=grd;
- cxt.fillRect(5,10,175,50);//x,y,x,y
- </script>
执行如下:
5、图片
JavaScript Code复制内容到剪贴板- <canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">
- 您的浏览器不支持 canvas 标签.
- </canvas>
- <script type="text/javascript">
- var c=document.getElementById("myCanvas");
- var cxt=c.getContext("2d");
- var img=new Image()
- img.src="aa.png"
- cxt.drawImage(img,10,20); //x,y
- </script>
执行如下:
以上就是本文的全部内容,希望对大家的学习有所帮助。
原文:http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 周冰倩1995《沧桑情歌》JVC日本录制[WAV+CUE]
- 辛禄乐队.2024-热烈的少年【星辰】【FLAC分轨】
- 成龙.1996-龙的心【滚石】【WAV+CUE】
- 童安格.1991-一世情缘【宝丽金】【WAV+CUE】
- 韩红2010-擦肩而过[央金玛][WAV+CUE]
- RiccardoTesi-UnballoLiscio,Vol.II(2024)[24-48]FLAC
- 金池VS刘罡2009《双声情》[WAV+CUE]
- 冯奥迪《卄》[320K/MP3][67.08MB]
- 冯奥迪《卄》[FLAC/分轨][172.46MB]
- Merryland《Merryland》[320K/MP3][69.48MB]
- 苏芮.1991-停在我心里的温柔【福茂】【WAV+CUE】
- 苏慧伦.2020-面面Every.Side.of.Me【相信音乐】【WAV+CUE】
- 群星.1991-不一样的感觉REMIX【宝丽金】【WAV+CUE】
- 银霞.1983-《你那好冷的小手》珍藏纪念版[WAV分轨]
- 银霞.2002-《国语巨星专辑VOL.3》2CD台湾版[WAV+CUE]