Canvas实例

mac2022-06-30 54

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #myCanvas{ background-color: #fde; } </style> </head> <body> <canvas id="myCanvas" width="1000" height="500"></canvas> </body> <script type="text/javascript"> var oc = document.getElementById("myCanvas"); var ctx = oc.getContext("2d"); var isAdd ; var obj = { x : 50, y: 50, width : 200, height : 200 } var num = 0 function rotate(){ ctx.save(); if(num==200){ isAdd = false; } if(num==0){ isAdd = true; } if(isAdd){ num++; } else{ num--; } ctx.clearRect(0,0,500,500); ctx.fillStyle="blueviolet"; ctx.translate(obj.x+(obj.width)/2,obj.y+(obj.height)/2); ctx.scale(num/100,num/100); ctx.rotate(num*Math.PI/180); ctx.translate(-(obj.x+(obj.width)/2),-(obj.y+(obj.height)/2)) ctx.fillRect(obj.x,obj.y,obj.width,obj.height); ctx.restore(); } setInterval(function(){ rotate(); },10); </script> </html>

在Canvas中添加save（）和restore（）方法是因为Canvas的绘制实在上一个绘制图形之后继续绘制的（覆盖）。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background: red; } #canvas{ background: white; width: 400px; height: 400px; } </style> </head> <body>   <canvas id="canvas" width="400" height="400"> <span>这是一个画布，请用ie10+浏览器查看，或者。。。。</span> </canvas> <input type="color" id="colorInput"/> <input type="number" id="numberInput" value="1"/> <script> //得到画布 var oC = document.getElementById('canvas'); //得到canvas的上下文环境 //目前只支持2d环境 var oGC = oC.getContext('2d'); oC.onmousedown = function(ev){ var colorInput = document.getElementById('colorInput'); var numberInput = document.getElementById('numberInput'); oGC.strokeStyle = colorInput.value; oGC.lineWidth = numberInput.value; oGC.beginPath(); var ev = ev || window.event; //得到按下这个点相对于canvas的位置 oGC.moveTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop); document.onmousemove = function(ev){ var ev = ev || window.event; oGC.lineTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop); oGC.stroke(); } document.onmouseup = function(){ oGC.closePath(); document.onmousemove = null; document.onmouseup = null; } } </script> </body> </html>

转载于:https://www.cnblogs.com/wmwPro/p/5642888.html

相关资源：微信小程序 canvas API详解及实例代码

最新回复(0)