HTML5-Canvas标签使用实例一

原创 2013年12月02日 10:33:48
 一、什么是Canvas标签?Canvas标签有什么用途?
这里过多的概念性解释我就不多写了的,大家完全可以百度、Google一下即可清楚更多。Canvas就是HTML5内新增的一个API标签。
<canvas> 标签定义图形,比如图表和其他图像。
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

二、如何使用Canvas API来画一个正方形,并加上对角线?
1、首先在HTML内设置一个Canvas标签,并设置其Height和Width,以及Border属性,代码如下:  
        <!-- canvas target -->
        <canvas id="diagonal" height="200px" width="200px" style="border:1px solid #000000;">            
        </canvas>

2、结合JS在Canvas区域内画图
        function drawDiagonal() {
            //取得canvas的元素及其绘图上下文
            var canvasObj = document.getElementById("diagonal");
            var context = canvasObj.getContext("2d");
            //用绝对坐标来创建一条路径
            //画两条对角线
            context.beginPath();
            //将点移动至原点
            context.moveTo(0, 0);
            //划线至右下角
            context.lineTo(200, 200);
            //将这条线绘制到canvas上
            context.stroke();

            //将点移动至右下角
            context.moveTo(0, 200);
            //划线至右上角
            context.lineTo(200, 0);
            //将这条线绘制到canvas上
            context.stroke();
        }
        //页面导入的时候执行画图程序
        window.addEventListener("load", drawDiagonal, true);

 3、运行页面后效果图如下

HTML5-canvas标签

canvas了解 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。 1、矩形 您的浏览器...
  • llayjun
  • llayjun
  • 2017年08月16日 13:25
  • 308

[HTML5-Canvas] HTML5 <canvas> 标签

定义和用法 标签定义图形,比如图表和其他图像。 实例 如何通过 canvas 元素来显示一个红色的矩形: var canvas=document.getElementById...
  • luqin1988
  • luqin1988
  • 2013年04月17日 16:43
  • 875

html5-canvas标签用法

canvas是HTML5中新定义的标签,顾名思义,它本身是一个画布标签,没有自己的行为,只是一个图形容器,必须使用脚本来绘制图形。下面是它用法的示例: Your browser does not su...
  • may_apple
  • may_apple
  • 2016年01月21日 09:43
  • 1085

关于html音频以及视频标签video audio标签的实例

html的video标签功能很强大, 增加了许多属性,比如autoplay controls loop poster等 还可以用js直接调用paly() pause()等方法 这里只联系一下au...
  • u011263845
  • u011263845
  • 2015年04月06日 18:32
  • 608

html5-canvas

1 初认识canvas.    (1)设置canvas
  • zd10101501
  • zd10101501
  • 2014年11月06日 20:48
  • 585

HTML5-canvas

canvas : 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。 在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。创建canvas: Creat ...
  • sinat_38052999
  • sinat_38052999
  • 2017年04月16日 22:11
  • 116

HTML5-Canvas

Canvas简介 是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形。例如:画图,合成照片,创建动画甚至实时视频处理与渲染。示例,使用CanvasRenderingContext2D...
  • sofia92
  • sofia92
  • 2016年04月11日 10:46
  • 176

HTML5-canvas画布

(1)canvas width、height和style里面的width、height一样吗? 如果直接设置canvas的width和height:画布和元素的宽度是你设置的值 如果设置的是st...
  • yangwensheng1122
  • yangwensheng1122
  • 2017年10月11日 11:58
  • 289

HTML5-Canvas画布的使用

一,首先让我们来了解一下CSS solid属性 solid的意思为:solid.adj 固体的,实心的,结实的,可靠的                                 n.固体,立...
  • Q_Jimmy
  • Q_Jimmy
  • 2015年11月06日 22:17
  • 477

freemarker 标签使用 (实例)

/html/proprty//${list.id}_${language}.html">                                     " alt="" title="...
  • u011677147
  • u011677147
  • 2014年09月16日 15:30
  • 196
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5-Canvas标签使用实例一
举报原因:
原因补充:

(最多只允许输入30个字)