技术栈

主页 > 前端开发 >

Web之旅—— Canvas初探

技术栈 - 中国领先的IT技术门户

一、Canvas初探

Canvas是HTML5中的核心技术之一。使用Canvas技术可以绘制图形、图表、动画效果和游戏开发。

二、使用Canvas绘制直线

先来看看canvas如何来使用,可以看到在html页面中添加了canvas元素。宽300px,高400px。如果不指定宽高会怎么样?动手试一试。

1、html页面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas教程第一节</title>
    <!--引入js文件-->
    <script type="text/javascript" data-src="canvas003.js"></script>
    <!--css文件-->
    <style type="text/css">
        canvas{
            border: dashed 1px black; //设置canvas的边框为1px的黑色虚线;
        }
    </style>
</head>
<body>
<!--添加canvas元素-->
<canvas id="canvas" width="300" height="400"></canvas>
</body>
</html>

2、JavaScript代码:

window.onload=function () {
    //获取canvas对象
    var canvas=document.getElementById("canvas");
    //获取context对象
    var cxt=canvas.getContext("2d");
    //开始绘制直线
    cxt.moveTo(50,50);
    cxt.lineTo(100,200);
    cxt.stroke();
}

三、实验效果

如下图所示的效果,就是利用canvas实现的。也许现在你还很好奇,也有很多不明白的地方,别着急,继续关注,听我一一道来。

PS:2018年的第一篇博文终于开更了。欢迎小伙伴们对过去一年的关注与支持!

责任编辑:admin  二维码分享:
本文标签: canvashtml
点击我更换图片

评论列表