语音识别与Canvas绘图技术应用-优快云博客

本文链接：https://blog.youkuaiyun.com/wjw_java_android/article/details/7924377

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
 
</head>
<body>
<!--语音识别功能-->
 yes，点击提交按钮试试啊try！！！！
<input id="yy" type="text" x-webkit-speech x-webkit-grammar="builtin:translate" />
<input type="button" value="submit" οnclick="shuohua()">
<br>
<!--就上面一句啊-->
<canvas id="can" width="800" height="500" style="border:30px solid blue">
</canvas>
</body>
<script type="text/javascript">
 var canvas1=document.getElementById("can");
 var cxt=canvas1.getContext("2d");
  
 
 //line
 cxt.beginPath();//定义开始
 cxt.moveTo(40,40);
 cxt.lineTo(40,420);
 cxt.stroke();//把两点穿起来
 cxt.closePath();//定义结束
 //三角形并填充颜色
 cxt.beginPath();//定义开始
 cxt.moveTo(60,40);
 cxt.lineTo(60,420);
 cxt.lineTo(160,420);
 cxt.fillStyle="red";//改变填充的颜色，默认的是黑色
 cxt.fill();
 cxt.closePath();//定义结束
 //空方框，填充颜色方框
 cxt.beginPath();
 cxt.strokeRect(170,150,180,80);//这四个数分别代表：横坐标，纵坐标，长，宽
 cxt.fillStyle="blue";
 cxt.fillRect(170,250,100,100);
 cxt.closePath();
 //圆圈
 cxt.beginPath();
 //圆心横坐标；圆心纵坐标；半径；控制圆显示的部分；最后一个true代表顺时针
 cxt.arc(450,250,80,0,Math.PI*2,true);
 cxt.stroke();
 cxt.fillStyle="green";
 cxt.fill();
 cxt.closePath();
 //var text="王建伟是最棒的";//画字符串 fillText(str,x,y)
 //cxt.fillText(text,500,360-);
 var yy=document.getElementById("yy");
 function shuohua(){
  alert(yy.value);
 }
</script>
</htm>