HTML5标签之canvas实战

时间：2015-04-21 14:47:05 阅读：174 评论：0 收藏：0 [点我收藏+]

1:什么是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2:创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>

3:通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
//画一个线段
//获取画布canvas DOM
var c = document.getElementById("myCanvas");
console.log(c);
//设置绘图环境CanvasRenderingContext2D
var cxt = c.getContext("2d");
console.log(cxt);
//设置画笔宽度
cxt.lineWidth = 10;
//设置画笔颜色
cxt.strokeStyle = "#ff9900";
//设置笔触的位置
cxt.moveTo(20, 20);
//设置移动的方式
cxt.lineTo(100, 20);
//画线
cxt.stroke();

注意：凡是路径图形，必须先开始路径，画完结束路径（封闭路径）
cxt.beginPath();
cxt.closePath();
防止多个图形之间产生关联。

HTML5标签之canvas实战

标签：canvas 图形

原文地址：http://blog.csdn.net/u013628152/article/details/45168467

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行