您的位置：首页 > Web前端 > HTML5

HTML5

2015-07-22 16:01 531 查看
canvas这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8>
<title>Document</title>
<style>
#myCanvas{ background: #CCC; }
* { margin:0; padding: 0;}
html,body{ width: 100%; height: 100%;}
canvas{ display: block;}
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="800" ></canvas>
</body>
</html>


第一部分：基本概念等

创建canvas画布



注意：① width、height，这两个属性定义了canvas元素宽和高，从而相应的定义了2D渲染上下文的尺寸。

　　　② 2D渲染上下文的尺寸默认值：宽300像素、高150像素

坐标

左上角为原点（0,0）

右移：x坐标增加

下移：y坐标增加

2D渲染上下文（真正绘制图形的地方）

<script type="text/javascript">
    var canvas = document.getElementById('myCanvas');  
     // 获取canvas的ID
    var context =canvas.getContext("2d");
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航