HTML5 Canvas入门

  HTML5的canvas(画布)元素使用JavaScript在网页上绘制图像。下面以一个简单例子及其效果图(图1)开始:

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            canvas{border:dashed 2px #CCC}
        </style>

        <script type="text/javascript">
        /* canvas元素本身没有绘图能力。所有绘制工作必须在JavaScript中完成 */
        function drawRect()
        {
            var c=document.getElementById("myCanvas");
            /* 创建context对象(内建的HTML5对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法) */
            var cxt=c.getContext("2d");
            /* 绘制一个黄色的矩形,并指定了位置和尺寸 */
            cxt.fillStyle="yellow";
            cxt.fillRect(40,40,220,120);
        }
        </script>
    </head>

    <body onload="drawRect();">
        <!-- 画布是一矩形区域(图中虚线框),这里设置id、宽度和高度 -->
        <canvas id="myCanvas" width="300" height="200"></canvas>
    </body>
</html>

  

  图2折线的实现(仅需要替换drawRect()中的代码):

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
/* moveTo():把路径移动到画布中的指定点,不创建线条 */
cxt.moveTo(10,10);
/* lineTo():添加一个新点,然后在画布中创建从该点到最后指定点的线条 */
cxt.lineTo(150,50);
cxt.lineTo(10,50);
/* stroke():绘制已定义的路径 */
cxt.stroke();

  图3的实现(仅需要替换drawRect()中的代码):

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#CCCCCC";
/* beginPath():起始一条路径,或重置当前路径 */
cxt.beginPath();
/* arc()的参数依次是:圆心x和y坐标、半径、起始角和结束角(弧度)、是否逆时针 */
cxt.arc(150,100,50,0,Math.PI*1.5,false);
/* closePath():创建从当前点回到起始点的路径 */
cxt.closePath();
/* fill():填充当前绘图(路径) */
cxt.fill();

  参考资料:

  http://www.w3school.com.cn/

  http://www.w3school.com.cn/tags/html_ref_canvas.asp

  http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html

不断学习中。。。

时间: 2024-12-25 14:56:28

HTML5 Canvas入门的相关文章

html5 Canvas绘制图形入门详解

html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome.Opera.Safari.IE9+)都已经开始支持html5了.除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛.html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊. ht

HTML5 canvas绘制线条曲线

HTML5 canvas入门 线条例子 1.简单线条 2.三角形 3.填充三角形背景颜色 4.线条颜色以及线条大小 5.二次贝塞尔曲线 6.三次贝塞尔曲线 <!doctype html> <html> <head> <meta charset="utf-8"/> <meta name="keywords" content="脚本小子_小贝_HTML5_canvas线条"/> <me

HTML5 Canvas 绘图入门

HTML5 Canvas 绘图入门 HTML5 Canvas 绘图入门,仅供学习参考 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5 移动Web开发指南</title> <style type="text/css"> h1, h5 { text-align: center; } canvas {

HTML5 canvas 绘制精美的图形

HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.01 版本规范.它还引入了几个新元素和属性,它们适用许多使用 web 页面的领域 — 音频.视频.图形.数据存储.内容呈现,等等.本文主要关注图形方面的增强:canvas. 新的 HTML5 canvas 是一个原生 HTML 绘图簿,用于 JavaScript 代码,不使用第三方工具.跨

赠书:HTML5 Canvas 2d 编程必读的两本经典

赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide(斧子演示,www.axeslide.com).在这个领域也积累了一些 经验,希望有机会和大家分享.今天是要给大家推荐两本这方面的书,同时会送一本书给大家. 要介绍的第一本书是我学习Canvas开发的入门书——<HTML5 Canvas核心技术:图形.动画与游戏开发>. 此书作者David Gear

HTML5新手入门指南

HTML5的发展越来越迈向成熟,很多的应用已经逐渐出现在你我日常生活中了,不只让传统网站上的互动Flash逐渐的被HTML5的技术取代,更重要的是可以透过HTML5的技术来开发跨平台的手机软件,让许多开发者感到十分兴奋! 当你开始想要学习.试图想要投入相关的开发时,由于HTML5的技术还在持续发展.进化当中,学习的资源也都比较零散,较难有一个整体的方向.在本篇文章中,笔者将会介绍HTML5的主要技术组成,并且提供一些学习资源让大家参考. HTML5到底是什么? 一般广义而言的HTML5则包含了H

使用html5 canvas绘制圆形或弧线

注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链接以了解使用html5 canvas绘制图形的完整内容. 在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: arc(x, y, radius, startRad, endRad, anticlockwise) 在canvas画

03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(section)的标题进行组合 2.figure <figure> 标签规定独立的流内容(图像.图表.照片.代码等等). figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响. Figcaption figure的标题 一般格式: <figure> <figcap

HTML5菜鸟入门指导:简介、平台搭建、示例演示

HTML5菜鸟入门指导:简介.平台搭建.示例演示 一.HTML5简介 1.  了解HTML (1).什么是HTML? HTML是用来描述网页的一种语言: HTML指超文本标记语言(Hyper Text Markup Language) HTML不是变成语言,是一种标记语言 (2).版本 HTML出现于1991年 HTML+出现于1993年 HTML2.0出现于1995年 HTML3.2出现于1997年 HTML4.01出现于1999年 XHTML1.0出现于2000年 HTML5出现于2012年