HTML5图形绘制学习（1）-- Canvas 元素简介
Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素。和其名称Canvas一样，它就相当于一个画布，我们可以在其上描绘各种图形。
这里所说的绘制图型，不是指我们可以进行可视化的图形绘制，而是要利用javascript在其中进行进行操作。
这里做个简单的canvas实例：
1.在页面中添加canvas元素
首先在页面中添加canvas元素，需要给定其高度、宽度和唯一标识id<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"> <script type="text/javascript" src="canvas.js"></script> </head>
<body onload="draw('canvas')">
<h1>Canvas元素示例</h1>
<canvas id="canvas" width="400" height="300">
</canvas>
</body>
</html>
2.绘制矩形
在cavas.js文件中做绘制矩形操作：
function draw(id){
// 1.获取canvas对象
var canvasDom = document.getElementById(id);
if(canvasDom == null){
return false;
}
// 2.获取上下文
var context = canvas.getContext('2d');
// 3.填充与绘制边框
context.fillRect(0, 0, 400, 300);
// 4.设定绘图样式
context.fillStyle = '#EEF'; // 填充颜色
// 5.制定线宽
context.lineWidth = 1;
// 6.指定颜色值
context.strokeStyle = 'blue'; // 设定边框颜色
// 7.绘制矩形
context.fillRect(50, 50, 100, 100);// 填充矩形
context.strokeRect(50, 50, 100, 100); // 绘制矩形边框
}
最终效果
3.绘制圆形
function drawCircle(id){
// 1.获取canvas
var canvasDom = document.getElementById(id);
if(canvasDom == null){
return false;
}
// 2.获取上下文
var context = canvas.getContext('2d');
// 3.填充颜色
context.fillStyle = "#EEF";
// 4.进行绘制
context.fillRect(0, 0, 400, 300);
var n = 0;
for(var i=0; i<10; i++){
// 开始路径
context.beginPath();
// 绘制圆形路径
context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);
// 结束路径
context.closePath();
// 填充渐变色
context.fillStyle = "rgba(255, 0, 0, 0.25)";
// 进行图形绘制
context.fill();
}
}
效果图:
HTML5图形绘制学习（1）-- Canvas 元素简介的更多相关文章
- HTML5图形绘制
要在HTML5中绘制图形,首先要放置一个canvas元素 <canvas id="canvas" width="400" height="300 ...
- 详解HTML5中的进度条progress元素简介及兼容性处理
一.progress元素基本了解 1.基本知识 progress元素属于HTML5家族,指进度条.IE10+以及其他靠谱浏览器都支持. 注释:Internet Explorer 9 以及更早的版本不支 ...
- html5--5-1 了解canvas元素
html5--5-1 了解canvas元素 学习要点 如何在HTML5文档中添加canvas元素 canvas的属性 了解canvas坐标系 了解script元素 绘制一条直线(准确的说是线段) 什么 ...
- HTML5新增及移除的元素
HTML经过10多年的发展,其元素经历了废弃与不断重新定义的过程.为了更好的处理现在的互联网应用,HTML5新增了图形绘制.多媒体播放.页面结构.应用程序存储.网络工作等新元素.http://hove ...
- 小强的HTML5移动开发之路（6）——Canvas图形绘制基础
来自:http://blog.csdn.net/dawanganban/article/details/17686039 在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用 ...
- HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- [html] 学习笔记-Canvas图形绘制处理
使用Canvas API 可以将一个图形重叠绘制在另外一个图形上,也可以给图形添加阴影效果. 1.Canvas 图形组合 通过 globalCompositeOperation = 属性 来指定重叠效 ...
- HTML5移动开发学习笔记之Canvas基础
1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...
随机推荐
- Java中的IO学习总结
今天刚刚看完java的io流操作,把主要的脉络看了一遍,不能保证以后使用时都能得心应手,但是最起码用到时知道有这么一个功能可以实现,下面对学习进行一下简单的总结: IO流主要用于硬盘.内存.键盘等处理 ...
- Ecstore 2.0 报表显示空白
INSERT INTO `sdb_ectools_analysis` (`id`, `service`, `interval`, `modify`) VALUES (, ), (, ), (, ); ...
- 异常处理与调试 - 零基础入门学习Delphi50
异常处理与调试 让编程改变世界 Change the world by program 异常处理与调试 在应用程序开发中如何检测.处理程序的运行错误是一个很重要的问题. 有些错误是无法控制的. 如何处 ...
- 编译安装zabbix
1. 说明:本例用源码包来安装zabbix,但是zabbix的后台数据库在这里选择mysql,然而mysql的安装方式不在选择源码了,而是选择已经编译好的通用linux包(tar包) zabbix源码 ...
- 七、适配器（Adapter）模式--结构模式(Structural Pattern)
适配器模式:把一个类的接口变换成客户端所期待的另一种接口,从而使原本接口不匹配而无法在一起工作的两个类能够在一起工作. 类的 Adapter模式的结构: 类适配器类图: 由图中可以看出,Adaptee ...
- 8051、ARM和DSP指令周期的测试与分析
在实时嵌入式控制系统中,指令周期对系统的性能有至关重要的影响.介绍几种最常用的微控制器的工作机制,采用一段循环语句对这几种微控制器的指令周期进行测试,并进行分析比较.分析结论对系统控制器的选择有一定的 ...
- Fragment销毁时replace和add两个方法的区别
这个首先从一个bug说起,如图: 我们都知道fragment切换有两种方式: 1. replace方式 transaction.replace(R.id.content, IndexFragmen ...
- EditText获取焦点监听事件_EditText获取和失去焦点操作
今天在做搜索框的时候.遇到需要获取焦点之后做一些事情.实现方法也很简单.那就是绑定OnFocusChangeListener事件.实现 onFocusChange(View v, boolean ha ...
- PHP安装和配置
编译安装php5-5.2.6-49.11.src.rpm: ./configure --prefix=/usr/local/php --with-apxs2=/usr/local/apache/bin ...
- OpenGL进阶(十一) - GLSL4.x中的数据传递
in out 对于 vertex shader,每个顶点都会包含一次,它的主要工作时处理关于定点的数据,然后把结果传递到管线的下个阶段. 以前版本的GLSL,数据会通过一些内建变量,比如gl_Vert ...