关闭

HTML5-Canvas标签使用实例一

613人阅读 评论(0) 收藏 举报
分类:
 一、什么是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、运行页面后效果图如下

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1221801次
    • 积分:14532
    • 等级:
    • 排名:第812名
    • 原创:420篇
    • 转载:31篇
    • 译文:0篇
    • 评论:81条
    文章分类
    最新评论