HTML5标签之canvas实战 - HTML5+CSS3教程 - 科蚁网
请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

科蚁网 科蚁网 科蚁学院 HTML5+CSS3教程 查看内容

HTML5标签之canvas实战

2015-6-1 23:55| 发布者: admin| 查看: 2252| 评论: 1|来自: 网络搜集

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

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


2:创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度:



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();


1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

发表评论

最新评论

引用 筑墙碎梦 2015-10-30 09:17
感谢分享

查看全部评论(1)


关闭

站长推荐上一条 /1 下一条

客服中心 官方QQ群