HTML5画布Canvas
2017-03-22 22:45
162 查看
一、Canvas概念介绍
1、概念 Canvas : 画布2、作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成。它本身只是个图形容器,必须使用脚本来绘制图像
二、画图步骤
1、创建一个画布
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>注意:<canvas>元素没有边框和内容, 使用 style 属性来添加边框
2、使用JavaScript来绘制图像
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> HTML5 canvas 标签。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,20,25); </script> </body> </html>
JavaScript画图代码步骤 :
①、首先, 找到canvas元素var c=document.getElementById("myCanvas");
②、创建Context对象
var ctx=c.getContext("2d");
getContext("2d") 对象是内建的HTML5对象, 拥有多种绘制路径、矩形、图形、字符及添加图像的方法
③、业务代码
三、Canvas用法
1、介绍Canvas常用属性
①、fillStyle属性 : 可以是CSS颜色、渐变、图案等②、font : 定义字体
2、介绍Canvas常用方法
①、fillRect(x, y, width, height): 定义矩形的填充方式②、fillText(text, x, y): 在canvas绘制文本
③、drawImage(image, x, y): 图像画到画布上
四、参考文献
1、http://www.runoob.com/html/html5-canvas.html2、http://www.runoob.com/tags/ref-canvas.html
相关文章推荐
- HTML5----Canvas画布
- HTML5之Canvas绘图——Canvas画布调整之移动、缩放、旋转
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
- HTML5画布Canvas坐标轴转换、图案填充、渐变与阴影
- html5 canvas 画布基础
- 关于html5画布(canvas)
- HTML5画布(CANVAS)速查简表
- html5 canvas画布居中
- HTML5 Canvas 画布
- HTML5 canvas 画布画圆
- HTML5 画布上的 Three.js 环境灯光(HTML5 Canvas Three.js Ambient Lighting)
- HTML5画布元素canvas提供的API使用方法
- 【HTML5】Canvas画布
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
- HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制
- 自学HTML5第四节(canvas画布详解)
- HTML5 2D游戏引擎研发系列 第六章 <Canvas技术篇-画布技术-混色特效和粒子>
- html5新增标签canvas画布基础详解及实操案例(上)
- 基于javascript和canvas(画布)的开源HTML5应用开发框架 - iio Engine