mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 23:07:35 +00:00
Base: Move all the HTML test content into /res/html/misc
This commit is contained in:
parent
4720635aab
commit
de12cf6821
58 changed files with 1 additions and 1 deletions
56
Base/res/html/misc/canvas-path-quadratic-curve.html
Normal file
56
Base/res/html/misc/canvas-path-quadratic-curve.html
Normal file
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>canvas path - quadratic curve example</title>
|
||||
</head>
|
||||
<body>
|
||||
<canvas width=500 height=500></canvas>
|
||||
<script>
|
||||
|
||||
function drawSomeCurves() {
|
||||
|
||||
var canvas = document.querySelector("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
var x = 150;
|
||||
var y = 150;
|
||||
|
||||
canvas.addEventListener("mousedown", function(e) {
|
||||
x = e.offsetX;
|
||||
y = e.offsetY;
|
||||
});
|
||||
|
||||
canvas.addEventListener("mousemove", function(e) {
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.fillRect(0, 0, 500, 500);
|
||||
|
||||
ctx.strokeStyle = 'red';
|
||||
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
ctx.fillRect(0, 0, 500, 500);
|
||||
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.quadraticCurveTo(e.offsetX, e.offsetY, x, y);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.moveTo(30, 90);
|
||||
ctx.lineTo(110, 20);
|
||||
ctx.lineTo(240, 130);
|
||||
ctx.lineTo(60, 130);
|
||||
ctx.lineTo(190, 20);
|
||||
ctx.lineTo(270, 90);
|
||||
ctx.closePath();
|
||||
|
||||
// Fill path
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.fill('evenodd');
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
drawSomeCurves();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue