HTML5 画布canvas使用方法
建站知识 2021-07-02 23:00www.168986.cn长沙网站建设
canvas 元素使用 JavaScript 在网页上绘制图像,本身是没有绘图能力。
canvas 是一个矩形区域,可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
狼蚁网站SEO优化来做几个示例
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="#c";
- cxt.fillRect(5,10,150,60); //x,y,x,y
- </script>
执行如下
2、获取坐标
JavaScript Code复制内容到剪贴板
- <script type="text/javascript">
- function vs_getCoordinates(e){
- x=e.clientX;
- y=e.clientY;
- document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; }
- function vs_clearCoordinates(){
- document.getElementById("xycoordinates").innerHTML="";}
- </script>
XML/HTML Code复制内容到剪贴板
- <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="vs_getCoordinates(event)" onmouseout="vs_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="#c";
- cxt.beginPath();
- cxt.arc(20,20,10,0,Math.PI2,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.addColorS(0,"#000000"); //黑
- grd.addColorS(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>
执行如下
以上就是本文的全部内容,希望对大家的学习有所帮助。
原文
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML