Web之旅—— Canvas初探

作者: 葉糖糖 | 来源:发表于2018-01-13 03:00 被阅读49次

Web之旅—— Canvas初探
初探 HTML5 Web Workers
canvas初探
Service Workers
离屏Canvas
Canvas——Draw on the Web - v1.0.p
canvas绘制基础
canvas 学习笔记一
python wsgi+Odoo 的启动
svg 文本渲染成canvas

一、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" 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();
}