Regulación de armas de fuego a partir de 1980

CAPÍTULO III: REGULACIÓN DE LA POSESIÓN DE ARMAS DE FUEGO

3.1 Marco legal

3.1.3 Regulación de armas de fuego a partir de 1980

With canvas, the Web page becomes a drawing pad, and you use JavaScript commands to draw pixel-based shapes on a canvas that include color, gradients, and pattern fills. Canvas also enables you to render text with various embellishments, and animate objects by making them move, change scale, and so on.

Figure 2-13

The Web page with multiple images and a caption

Illustrations: © MightyIsland/iStockphoto

CANVAS BASICS

To use canvas, you first define a canvas in HTML. The basic syntax for the canvas element is as follows:

<canvas id="smlRectangle" height="100"

width="200"></canvas>

This element creates your drawing pad. The canvas element requires the id attribute to reference the canvas in JavaScript and to add it to the Document Object Model (DOM). You should also specify the dimensions of the canvas—the height and width—which are in pixels. JavaScript works with the two-dimensional (2D) application programming interface (API) to actually draw items on the canvas.

USE THE CANVAS TO CREATE A SHAPE

GET READY. To use the canvas element to create a shape, perform the following steps:

1. In your editing tool, type the following markup:

<!doctype html>

<html>

<head>

<title>Canvas Test</title>

function f1() { var canvas =

document.getElementById("smlRectangle");

context = canvas.getContext("2d");

context.fillStyle = "rgb(0,0,255)";

context.fillRect(10, 20, 200, 100);

}

</script>

</head>

</canvas>

</body>

</html>

Developers use canvas to create online games, rotating photo galleries, stock tickers, and much more. The canvas element graphics and animation functions are intended to provide quality similar to those in Flash movies.

TAKE NOTE

*

CERTIFICATION READY What is the basic syntax for the canvas element in an HTML document?

2.2

You can include JavaScripts inside the head element of your HTML document, or in an external file.

TAKE NOTE

*

The onload attribute causes the JavaScript function in the script to run. This script first finds the element with the id smlRectangle:

var canvas = document.getElementById("smlRectangle");

The context.fillStyle method fills the rectangle with a blue color using the RGB values 0, 0, 255. The context.fillRect method creates a 200-pixel wide x 100-pixel tall rectangle, positioned 10 pixels down and 20 pixels over from the upper-left corner of the canvas and fills it using the color specified by fillStyle.

2. Save the file as L2-canvas.html and view it in a browser. The shape should appear as shown in Figure 2-14.

X

^REF

You’ll learn how to use JavaScript in Lessons 8, 9, and 10.

3. If a blue rectangle doesn’t appear, go to the W3C Markup Validation Service Web page at http://validator.w3.org. Upload L2-canvas.html and click Check to have the service check it. Fix any errors reported by the checker. Save the file again and view it in a browser.

4. Leave the file, editing tool, and Web browser open if you’re continuing immediately to the next exercise.

CREATING AN OUTLINE OF A SHAPE

To create an outline of a rectangle without a fill color, use the context.strokeRect method. It uses the same values as context.fillRect. To modify the color of the outline (the stroke color), use context.strokeStyle. For example, to create a 200 x 100 pixel rectangular outline in red, use these methods in your JavaScript:

context.strokeStyle = "red";

context.strokeRect(10,20,200,100);

USE CANVAS TO CREATE THE OUTLINE OF A SHAPE

GET READY. To use the canvas element to create the outline of a shape, perform the following steps:

1. In your editing tool, save L2-canvas.html as L2-canvas-stroke.html.

2. Replace the fillStyle and fillRect code lines with the following:

context.strokeStyle = "red";

context.strokeRect(10,20,200,100);

3. Delete the width and height attributes from the canvas element in the body (after id="smlRectangle").

4. Save the file and view it in a Web browser. The shape should appear as shown in Figure 2-15.

Figure 2-14

The Web page with a canvas shape

5. Close the file but leave the editing tool and Web browser open if you’re continuing immediately to the next exercise.

PROVIDING AN ALTERNATE IMAGE OR TEXT FOR OLDER BROWSERS

Some older browsers cannot render canvas drawings or animation. Therefore, you should add an image, text, or some other HTML content within the canvas element that will display if the drawing cannot. The “backup” content, also referred to as fallback content, won’t display if canvas is supported. This example displays an image (smlRectangle.jpg) similar to that which a filled rectangle canvas would create:

<img

src="http://www.example.com/images/smlRectangle.jpg"

alt="A blue rectangle" />

</canvas>

To display text instead of an image, you would insert text in place of the <img> tag.

ADD A FALLBACK TO YOUR HTML DOCUMENT

GET READY. To add a fallback to your HTML document, perform the following steps:

1. In your editing tool, open L2-canvas.html and save it as L2-canvas-canvas-fallback.html.

2. Replace the canvas element with the following:

Your browser does not support the canvas tag.

</canvas>

3. Save the file and view it in the Internet Explorer 9 Web browser. You should see the canvas drawing.

4. Press F12 to enter browser mode, click Document Mode on the menu bar, and select Internet Explorer 7 standards.

Figure 2-15

The Web page with a canvas shape outline

5. Press F12 again. An error message appears, stating that it doesn’t recognize a property or method. Close the error message. The browser window displays the fallback text, as shown in Figure 2-16.

6. Leave the file, editing tool, and Web browser open if you’re continuing immediately to the next exercise.

✚

MORE INFORMATION

For more information on the canvas element, visit the Microsoft HTML5 Graphics Web page at http://bit.ly/M8ZNkf.

The HTMLCenter Web site at http://www.htmlcenter.com/blog/rgb-color-chart/ lists RGB color codes.

Scalable Vector Graphics (SVG) is a language for describing 2D graphics in Extensible Markup Language (XML). XML is a cousin to HTML, and has played an important part of HTML 4.01 Web pages. SVG technology is not new, but HTML5 now enables SVG objects to be embedded in Web pages without using the <object>

or <embed> tags. (All types of SVG graphics are referred to as objects, and SVG loads into the DOM.)

In document LAS ARMAS EN EL PERÚ: UNA PROPUESTA PARA EL ANÁLISIS SOBRE SU REGULACIÓN Y CONTROL (página 89-95)