Monday 31 July 2017
CTX STYLE
------------------------------------------------------------------------------------------------------------------
READ MORE
https://www.google.co.uk/search?q=canvas+draw+transparent+rectangle&rlz=1C1_____enGB747GB747&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjI0cW84bPVAhXlIsAKHVDXDEQQ_AUICygC&biw=1164&bih=631#imgrc=3jc9j4OBbN0N5M:
https://www.google.co.uk/search?rlz=1C1_____enGB747GB747&biw=1164&bih=631&tbm=isch&sa=1&q=ctx+fill+style+show+background+image+&oq=ctx+fill+style+show+background+image+&gs_l=psy-ab.3...92364.110941.0.111752.45.34.11.0.0.0.172.2635.27j7.34.0....0...1.1.64.psy-ab..0.0.0.gzwygK2FF4A#imgrc=eycHzfx1221a8M:
------------------------------------------------------------------------------------------------------------------
CODE1
http://www.java2s.com/Tutorials/Javascript/Canvas/Draw/Draw_transparent_shapes_on_HTML5_Canvas_in_JavaScript.htm
------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function(){<!-- w w w . ja v a2s . c o m-->
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// draw rectangle
context.beginPath();
context.rect(240, 30, 130, 130);
context.fillStyle = "blue";
context.fill();
// draw circle
context.globalAlpha = 0.5; // set global alpha
context.beginPath();
context.arc(359, 150, 70, 0, 2 * Math.PI, false);
context.fillStyle = "red";
context.fill();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
CODE:2
https://www.w3schools.com/tags/canvas_fillstyle.asp
http://www.w3resource.com/html5-canvas/
https://stackoverflow.com/questions/27981423/how-to-fill-color-of-more-than-one-canvas-image
------------------------------------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Test</title>
</head>
<body>
<header> </header>
<nav> </nav>
<section>
<div>
<canvas id="canvas" width="320" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
<script type="text/javascript">
var canvas;
var ctx;
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
draw();
}
function draw() {
ctx.fillStyle = '#FA6900';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(0,0,15,150);
ctx.save();
ctx.fillStyle = '#E0E4CD';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(30,0,30,150);
ctx.save();
ctx.fillStyle = '#A7DBD7';
ctx.shadowOffsetX = 15;
ctx.shadowOffsetY = 15;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(90,0,45,150);
ctx.save();
ctx.restore();
ctx.beginPath();
ctx.arc(185, 75, 22, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
ctx.restore();
ctx.beginPath();
ctx.arc(260, 75, 15, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
ctx.restore();
ctx.beginPath();
ctx.arc(305, 75, 8, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
init();
</script>
</section>
<aside> </aside>
<footer> </footer>
</body>
</html>
You can copy this code and paste it into a new file called something like saverestore.html and when you open it with an HTML5 friendly browser like Firefox 3.6 it will display the canvas.
First we draw a rectangle setting the fillStyle and shadow properties for our shape. Then we call ctx.save() which adds our settings to the stack.
ctx.fillStyle = '#FA6900';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(0,0,15,150);
ctx.save();
Then we draw another rectangle setting the fillStyle and shadow properties for our shape and call ctx.save() which adds our settings to the stack.
ctx.fillStyle = '#E0E4CD';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(30,0,30,150);
ctx.save();
And we draw another rectangle setting the fillStyle and shadow properties for our shape. Then we call ctx.save() which adds our settings to the stack.
ctx.fillStyle = '#A7DBD7';
ctx.shadowOffsetX = 15;
ctx.shadowOffsetY = 15;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(90,0,45,150);
ctx.save();
Now we call ctx.restore() and pop the settings off of the top of our stack and we draw a circle using those settings.
ctx.restore();
ctx.beginPath();
ctx.arc(185, 75, 22, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
Another call to ctx.restore() pops the next settings off of the top of our stack and we draw a circle using those settings.
ctx.restore();
ctx.beginPath();
ctx.arc(260, 75, 15, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
And a final call to ctx.restore() pops the next settings off of the top of our stack and we draw a circle using those settings.
ctx.restore();
ctx.beginPath();
ctx.arc(305, 75, 8, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment