Canvas tutorial - MDC

<canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript). This can, for instance, be used to draw graphs, combine photos, or create simple (and not so simple) animations. The images on this page show examples of <canvas> implementations which will be created in this tutorial. This tutorial describes how to use the <canvas> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas about what you can do with canvas, and will provide code snippets that may get you started in building your own content. First introduced in WebKit by Apple for the OS X Dashboard, <canvas> has since been implemented in browsers. Before you start Using the <canvas> element is not very difficult, but you do need a basic understanding of HTML and JavaScript. In this tutorial See also A note to contributors

OpenGL OpenGL (Open Graphics Library) es una especificación estándar que define una API multilenguaje y multiplataforma para escribir aplicaciones que produzcan gráficos 2D y 3D. La interfaz consiste en más de 250 funciones diferentes que pueden usarse para dibujar escenas tridimensionales complejas a partir de primitivas geométricas simples, tales como puntos, líneas y triángulos. Fue desarrollada originalmente por Silicon Graphics Inc. Especificación[editar] Fundamentalmente OpenGL es una especificación, es decir, un documento que describe un conjunto de funciones y el comportamiento exacto que deben tener. Hay implementaciones eficientes de OpenGL para Mac OS, Microsoft Windows, GNU/Linux, varias plataformas Unix y PlayStation 3. La especificación OpenGL era revisada por el OpenGL Architecture Review Board (ARB), fundado en 1992. Mark Segal y Kurt Akeley fueron los autores de la especificación original de OpenGL. Diseño[editar] OpenGL tiene dos propósitos esenciales: Ejemplo[editar]

Home - KAAZING.ORG - Home - Kaazing Gateway HTML5 Canvas Tutorial: An Introduction One of the most important instruments in a painter’s toolkit is their canvas. It gives them the freedom to express all kinds of feelings, impressions, ideas, and so forth, in almost unlimited variations and combinations. And that freedom can be restricted only by two things — their skill level and their imagination. The situation in the web development world is similar. What is HTML5 Canvas? The canvas element is an element defined in HTML code using width and height attributes. What’s so Great About HTML5 Canvas? Here are some reasons you might want to consider learning to use HTML5’s canvas feature: Interactivity. What Applications Can You Create with HTML5 Canvas? OK, canvas is great. Gaming. Now that we know why we should learn canvas, let’s look at the basics of HTML5 Canvas and how to start using it. Canvas Rendering Contexts Every HTML5 canvas element must have a context. Getting Started To get started with canvas, all you need is a code editor and a browser with HTML5 canvas support.

Java 3D 1.5.2 Unzip Instructions The 1.5.2 version of the Java 3DTM API runs on JDK version 1.5.0 and higher. It has been released for the Windows, Linux, Solaris, and Mac OS X operating environments. NOTE: Installing the j3d jars and native libs into the "ext" directory of the JRE is discouraged, especially on Mac OS X where JOGL is used as the rendering engine. Doing so can cause conflicts with third-party applications launched via Java Web Start, and causes confusion later when upgrading the distribution. Windows The 1.5.2 release of the Java 3D API for Windows 2000, Windows XP (x86 or amd64), and Windows Vista runs on JDK version 1.5.0 and higher. Download and unzip j3d-1_5_2-XXX.zip (using Windows Explorer or an unzip tool such as WinZip) to a temporary download folder, for example, c:\Downloads. At this point your Java installation should be able to see the j3d class files. Linux, Solaris The 1.5.2 release of the Java 3D API for Linux or Solaris runs on JDK version 1.5.0 and higher. Mac OS X

HTML5 differences from HTML4 -- W3C Abstract "HTML5 Differences from HTML4" describes the differences of the HTML5 specification from those of HTML4. Status of This Document This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at This is the 9 December 2014 W3C Working Group Note produced by the HTML Working Group, part of the HTML Activity. Publication as a Working Group Note does not imply endorsement by the W3C Membership. This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. This document is governed by the 14 October 2005 W3C Process Document. Table of Contents 1 Introduction 1.1 Scope of This Document This document covers the W3C HTML5 specification. 1.2 History of HTML HTML4 became a W3C Recommendation in 1997. 1.3 Open Issues 1.4 Backward Compatibility <! <? <!

Applying styles and colors - Web API Interfaces | MDN In the chapter about drawing shapes, we used only the default line and fill styles. Here we will explore the canvas options we have at our disposal to make our drawings a little more attractive. You will learn how to add different colors, line styles, gradients, patterns and shadows to your drawings. Colors Up until now we have only seen methods of the drawing context. fillStyle = color Sets the style used when filling shapes. strokeStyle = color Sets the style for shapes' outlines. color is a string representing a CSS <color>, a gradient object, or a pattern object. Note: When you set the strokeStyle and/or fillStyle property, the new value becomes the default for all shapes being drawn from then on. The valid strings you can enter should, according to the specification, be CSS <color> values. ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; ctx.fillStyle = "rgb(255,165,0)"; ctx.fillStyle = "rgba(255,165,0,1)"; A fillStyle example draw(); The result looks like this: A strokeStyle example

Objetos 3d en Illustrator Confieso que no conozco todas las posibilidades que ofrece este programa de Adobe. Podría decirse que apenas sé usarlo puesto que generalmente uso Freehand cuando necesito trabajar con gráficos vectoriales. Pero o bien por desconocimiento o por que Freehand no dispone de ellas, uso Illustrator cuando quiero añadirle un toque 3D a los diseños sin tener que meterme en programas específicos para tal fin como Cinema4D. Mediante este sencillo tutorial podrás aprender a generar objetos 3d partiendo de un “patrón plano”. Ni que decir tiene que lo expuesto aquí puede no funcionar en según qué casos y que, además, muchas de las opciones pueden variar a gusto del consumidor :P. También supongo que el que quiera hacer este tutorial ya sabrá usar mínimamente Illustrator. Requerimientos Illustrator (recomendada versión 10 o superior). Tiempo estimado Entre 10 y 40 minutos (dependiendo de la velocidad del PC) Abrimos Illustrator y creamos una forma básica mediante trazados.

Getting a WebGL Implementation - WebGL Public Wiki The WebGL 1.0 specification has recently been released, and the latest builds of several browsers are close to reaching full conformance. Here are instructions on how to obtain a copy of a browser supporting the WebGL specification. As various implementations reach 100% conformance, expect that browsers will have this functionality built in to their latest releases, and not require any manual steps to enable it. Firefox WebGL is supported in Firefox/4.0 For testing/debugging purposes, software rendering can be used through OSMesa (off-screen Mesa), by setting the "webgl.osmesalib" variable to point to the OSMesa shared library (typically /usr/lib/libOSMesa.so). You can also try setting the "webgl.force-enabled" variable to true if WebGL is not working. Safari WebGL is supported on Mac OS X 10.6 in the WebKit nightly builds or in Safari 5.x and above After downloading, installing, and the browser, you can enable WebGL through the Develop menu. Chrome / Chromium Opera

HTML5 Studio ⧉ Info Slider Carousel Image gallery in a carousel UI. CSS 2D Transforms CSS 3D Transforms input type=range Your browser may not fully support these features. View SourceDownload Sample WebGL Globe A WebGL sphere of news stories. WebGL CSS3 2D transforms CSS3 transitions Webm video ASCII Art Synchronized ASCII art video via WebSockets. HTML5 WebSockets Orientation Physics Break up a video into lots of boxes and move them around by titling your machine. Canvas Device Orientation Video SVG Puzzle Solve the puzzle! SVG SVG Transforms Notification Time! Schedule a countdown to a notification, like an alarm clock. Desktop Notifications Date.js Video PiP Use Picture-in-picture to swap between two video sources while enjoying a color glow effect. HTML5 video Media element API Canvas Geolocation Peruse local job listings and envision your commute. Geolocation Google Base API Google Maps API Video Cube Build a cube of ASCII reflecting a video in realtime and reposition the view. Newspaper Columns Podcast Player

HTML5 Video Introduction In modern browsers, adding a video to your page is as easy as adding an image. No longer do you need to deal with special plug-ins or require crazy markup, you can do it with a single element. The Markup Let's jump in with a really simple example: That's all you need to embed a simple video on your page and show the basic controls so that a user can play, pause or otherwise control the video. Specifying Sources You can specify multiple source files by using the <source> element. When the browser parses the <source> tag, it uses the optional type attribute to help decide which file to download and play. It's also a good idea to make sure that your videos are being served with the right MIME type. Media Fragments Adding a media fragment to the media URL, you can specify the exact portion you want to play. You can also specify the times in hours:minutes:seconds, such as #t=00:01:05 to start the video at one minute, five seconds in. Providing captions and subtitles Attributes Styling