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标签-坐标变换与路径结合使用

HTML5教程实例-Canvas标签-坐标变换与路径结合使用 到目前为止,我们已经学会了很多Canvas的绘制方法,如果我们要绘制如下图的图形怎么办呢? 我们需要对矩形变形,使用坐标变换就足...

HTML5-Canvas标签使用实例一

最近居然也痴迷起了HTML5来,虽然在目前的项目中很少用到HTML5(原因是我们得考虑客户使用的是IE6、7、8的浏览器兼容性问题)。这里所写纯粹是个人兴趣。          一、什么是Can...
  • aganar
  • aganar
  • 2012-06-12 15:19
  • 3067

HTML5教程实例-用Canvas标签绘制圆形

HTML5教程实例-用Canvas标签绘制圆形 如果想要绘制一个圆形是不是还跟矩形一样呢? 绘制圆形的步骤: 1、开始创建路径 首先使用图形上下文对象的beginPath()方法。 2、创...

第四讲:使用html5中的canvas标签画出一个球在指定区域内的运动

小球在一个区域运动 var canvas = document.getElementById('mc'); var cxt = canvas.getCo...

使用HTML5 canvas 标签进行图片裁剪、旋转、缩放

代码使用到的js插件:jquery、bootstrap、lrz。 jquery就不说了,基本都知道。bootstrap是一个响应式的前端ui框架。使用它是为了在手机端查看页面时能够自适应宽高。lrz...

Html5 Canvas标签

  • 2012-10-12 09:05
  • 169KB
  • 下载

html5-canvas标签用法

canvas是HTML5中新定义的标签,顾名思义,它本身是一个画布标签,没有自己的行为,只是一个图形容器,必须使用脚本来绘制图形。下面是它用法的示例: Your browser does not su...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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