Canvas rotate
How do I make an canvas rotate?
What is a canvas rotate? How do you make a canvas rotate? This script and codes were developed by Anna on 01 December 2022, Thursday.
Canvas rotate - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>canvas rotate</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id='canvas' width='500' height='500'></canvas> <script src="js/index.js"></script>
</body>
</html>
Canvas rotate - Script Codes CSS Codes
canvas { background: #ccc;
}
Canvas rotate - Script Codes JS Codes
window.onload = function(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // ctx.fillRect(0,0,100,100); // fillRect繪製後會自動加入beginPath ctx.rect(50,50,100,100); ctx.fill(); var num = 0; canvas.onclick = function(e){ var mx = e.layerX; var my = e.layerY; if( ctx.isPointInPath(mx,my) ) { setInterval(function(){ ctx.clearRect(0,0,500,500); num++; ctx.save(); ctx.beginPath(); ctx.translate(100,100); ctx.scale(Math.sin(num*Math.PI/180), Math.sin(num*Math.PI/180)); ctx.rotate(num*Math.PI/180); //繞著自己旋轉 ctx.translate(-50,-50); ctx.rect(0,0,100,100); ctx.fill(); ctx.restore(); },50) } }
}
Developer | Anna |
Username | AnnaLiu |
Uploaded | December 01, 2022 |
Rating | 3 |
Size | 1,880 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Clock | 1,990 Kb |
Canvas bezia | 1,819 Kb |
Canvas | 1,499 Kb |
A Pen by Anna | 1,828 Kb |
Slider demo | 2,019 Kb |
Drag and drop | 2,706 Kb |
Canvas text | 1,725 Kb |
Pixi | 1,988 Kb |
Canvas animate | 1,965 Kb |
Demo | 1,834 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
Ghost Buttons with CSS3 | Mithicher | 2,509 Kb |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
Rainbow Drops | Csbarnes | 2,365 Kb |
Sassy Buttons | Elyseholladay | 2,299 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!