大佬教程收集整理的这篇文章主要介绍了html5整理(二),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
上一章简单介绍了canvas
,在这里展示一下其他的例子
var c=document.getElementById('myCanvas');//首先找到<canvas>对象 var ctx=c.getContext('2d');//然后创建contex对象 ctx.fillStyle="ff0000"; ctx.fillRect(0,150,75);//绘制红色矩形 ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();//绘制线条 ctx.beginPath(); ctx.arc(95,50,40,2*Math.PI); ctx.stroke();//绘制圆形 ctx.font="30px Arial"; ctx.fillText('Hello World',10,50);//绘制实心文本 ctx.strokeText('Hello World',50);//绘制空心文本 //create gradient var Grd=ctx.createLinearGradient(0,200,0); Grd.addColorStop(0,'red'); Grd.addColorStop(1,'white'); //fill with gradient ctx.fillStyle=Grd; ctx.fillRect(10,80); ctx.drawImage(img,10);//把一幅图像放置在画布上
SVG指可伸缩矢量图形、用于定义用于网络的基于矢量的图形、使用XML格式定义图形、SVG图像在放大或改变尺寸的情况下其图形质量不会有损失、SVG是万维网联盟的标准
SVG图像可被搜索、索引、脚本化或压缩
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,180,190,60,160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg>
@H_224_4@mathML @H_63_6@mathML是数学标记语言,是一种基于XML的标准,用来在互联网上书写数学符号和公式的置标语言
实例
<math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> <mo>=</mo> <msup><mi>c</mi><mn>2</mn></msup> </mrow> </math>
设置元素为可拖放<img draggable="true">
拖动什么-ondragstart
和setData()
function drag(ev){ev.dataTransfer.setData("Text",ev.targer.id);}
放到何处-ondargover
ondragover
事件规定在何处放置被拖动的数据,默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式event.preventDefault();
进行放置-ondrop
function drop(ev){ ev.preventDefault(); var data = ev.dataTransfer.getData('Text'); ev.target.appendChild(document.getElementById(data)); }
<!DOCTYPE HTML> <html> <head> <Meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>拖动 W3CSchool.cc 图片到矩形框中:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
getCurrentPosition()
获得用户的位置
var x=document.getElementById('demo'); function getLOCATIOn(){ if(navigator.geoLOCATIOn){ navigator.geoLOCATIOn.getCurrentPosition(showPosition); }else{ x.innerHTML="该浏览器不支持获取地理位置"; } } function showPosition(position){ x.innerHTML="纬度:"+position.coords.latitude + "<br>经度:"+position.coords.longitude; }
以上是大佬教程为你收集整理的html5整理(二)全部内容,希望文章能够帮你解决html5整理(二)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。