← Back to branch summary

~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to docs/demos/canvas-transparency-mask/index.html

  • Committer: Keith Hughitt
  • Date: 2012-08-10 18:15:41 UTC
  • mfrom: (402.4.61 hv)
  • Revision ID: keith.hughitt@nasa.gov-20120810181541-4zkdf7td1igj55lw
Merged in development changes

Show diffs side-by-side

added added

removed removed

Lines of Context:
docs/demos/canvas-transparency-mask/index.html
 
1
<!DOCTYPE html>
 
2
<html lang='en'>
 
3
<head>
 
4
        <!-- Last update: 2012/07/24 -->
 
5
        <title>Canvas > Transparency Masks</title>
 
6
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 
7
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
 
8
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.base.css" type='text/css'>
 
9
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.theme.css" type='text/css'>
 
10
        <style type='text/css'>
 
11
        body {background: #e5ffcc; padding:20px;}
 
12
        </style>
 
13
 
 
14
</head>
 
15
<body>
 
16
        <h1>Canvas > Transparency Masks</h1>
 
17
    <label for='radius'>Mask Radius: </label><span id='radius-value'></span><br /><br />
 
18
    <div id='radius' style='width:300px;' />
 
19
        <br /><br />
 
20
    <canvas id="mdi" width="512" height="512"></canvas>
 
21
    
 
22
 
 
23
<script type="text/javascript">
 
24
$(function () {
 
25
    var canvas, context, mdi, clipImage, radius = 245;
 
26
 
 
27
    // Get canvas context
 
28
    canvas = document.getElementById('mdi');
 
29
    context = canvas.getContext('2d');
 
30
 
 
31
    // Image container to store MDI data
 
32
    mdi = new Image();
 
33
    mdi.src = "mdi.png";
 
34
     
 
35
    // When the image is loaded, draw it
 
36
    mdi.onload = function () {
 
37
        clipImage(mdi, radius);
 
38
    }
 
39
 
 
40
    // Clip function
 
41
    function clipImage(image, radius) {
 
42
        context.save();
 
43
 
 
44
        // Create a circle
 
45
        context.beginPath();
 
46
        context.arc(256, 256, radius, 0, Math.PI * 2, false);
 
47
     
 
48
        // Clip to the current path
 
49
        context.clip();
 
50
     
 
51
        context.drawImage(mdi, 0, 0);
 
52
 
 
53
        context.restore();
 
54
    }
 
55
 
 
56
    // Set initial value
 
57
    $("#radius-value").html(radius + " pixels");
 
58
 
 
59
    // Load slider
 
60
    $( "#radius" ).slider({
 
61
        min: 0,
 
62
        max: 500,
 
63
        value: radius,
 
64
        // Slider change handler
 
65
        slide: function(event, ui) {
 
66
            context.clearRect(0, 0, canvas.width, canvas.height);
 
67
            clipImage(mdi, ui.value);
 
68
            $("#radius-value").html(ui.value + " pixels");
 
69
        }
 
70
    });
 
71
});
 
72
</script>
 
73
</body>
 
74
</html>