HTML5 canvas

作者: hi武林高手 | 来源:发表于2018-08-04 17:45 被阅读2次

canvas元素用于在网页上绘制图形
那么什么是canvas?
HTML5的canvas元素使用脚本通常是用JavaScript在网页上绘制图像。画布是一个矩形区域,我们可以控制其每一个像素,通过<canvas>元素来绘制,canvas拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。
注意默认情况下<canvas>元素没有边框和内容
创建一个画布(canvas)
向html页面中添加canvas元素
规定元素的id,宽度和高度

<canvas id="myCanvas" width="200" height="100"><canvas>

注意:标签通常需要指定一个id属性脚本中经常引用
提示:可以在html页面中使用多个canvas元素使用style属性来加添加边框
使用JavaScript来绘制图像
canvas元素元素本身没有绘图能力。所有的绘制工作必须在JavaScript内部完成。
实例

<script>
var c =document.getELementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#ff0000";
cxt.fillRect(0,0,750,75);
</script>

实例解析
首先找到<canvas>元素,然后创建context对象,getContext("2d")对象是内建的HTML5对象,上面ctx的两个方法绘制了一个红色的矩形,通过fillStyle属性可以是css颜色,渐变,或图案。fillStyle默认设置是#000000黑色
fillRect(x,y,width,height)方法定义了矩形当前的填充方式。

通过canvas可以画出许多好看炫酷的特效!等待你来开发!

相关文章

  • html5 Canvas画图5:曲线之arc

    本文属于《html5 Canvas画图系列教程》 在《html5 Canvas画图教程2:Canvas画线条 基础...

  • canvas笔记

    一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...

  • canvas

    @(HTML5)[canvas与SVG] [TOC] 十 、canvas canvas的基本用法 canvas是H...

  • HTML5 Canvas 完整测试 - canvas 标签

    在 html5 文档内创建 canvas 画布: “画布”(canvas) 是 html5 中独有的元素,通过它可...

  • HTML5 Canvas笔记——绘图剪纸

    参考书目:《HTML5 Canvas核心技术 图形、动画与游戏开发》 HTML5 Canvas绘图剪纸

  • canvas浅尝

    简单了解canvas 1.什么是canvas HTML5 的 canvas 元素使用 JavaScript 在网页...

  • canvas学习一

    一、什么是canvas? canvas 是 HTML5 的标签元素,使用 JavaScript 在canvas里绘...

  • 14-JS canvas 学习

    Canvas简介 canvas作用: canvas元素可以让用户在网页上绘制图形; canvas介绍 HTML5中...

  • 1.canvas基础(1)

    canvas定义 Canvas 对象是 HTML5 中新增的。HTML5 标签用于绘制图像(通过脚本,通常是 ...

  • HTML5 Canvas笔记——打印出Hello Canvas

    参考书目:《HTML5 Canvas核心技术 图形、动画与游戏开发》 HTML5 Canvas简单入门操作,如同每...

网友评论

    本文标题:HTML5 canvas

    本文链接:https://www.haomeiwen.com/subject/tvvmvftx.html