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> < ...
随机推荐
- git merge的recursive策略和merge-base
git的合并策略总共有3种,一种是resovle,一种是recursive,一种是octopus.其中resolve和recursive适用于合并2个branch,octopus适用于合并3个或者3个 ...
- MYSQL开发技巧之行转列和列转行
行转列--两种方法第一种方法:行转列我们通常是使用交叉连接和子查询的方式做到,比如下面的例子,查询每个name的对应id的和mysql> select * from user; +----+-- ...
- 单机/伪分布式Hadoop2.4.1安装文档
转载自官方文档,最新版请见:http://hadoop.apache.org/docs/r2.4.1/hadoop-project-dist/hadoop-common/SingleCluster.h ...
- [C++程序设计]用指向数组的指针作函数参数
#include <iostream> using namespace std; int main() { ]); ][]={,,,,,,,,,,,}; output(a); ; } ]) ...
- iptables中规则的关系——以只允许某些IP段访问为例
最近遇到一个问题:服务器被全球的IP频繁试图通过ssh登录. 于是想到通过iptables防火墙限制访问,达到:仅允许指定ip段访问ssh服务(22端口). 关于iptables添加规则的文章有很多, ...
- STL中vector，Map，Set的实现原理
vector的数据安排以及操作方式,与array非常类似,两者唯一的区别是空间运用的灵活性,array是静态空间,一旦配置了就不能改变,如果你想要大一点的空间,就必须首先配置一块新空间,然后将原来的元 ...
- ASP.NET MVC 4.0 学习1-C#基础语法
1,方法多載,相同的方法名稱,不同的參數類型.數量 class Program { static void Main(string[] args) { Program newObject = new ...
- A（51）和C（51）相互调用
C语言是一种编译型程序设计语言,它兼顾了多种高级语言的特点,并可以调用汇编语言的子程序.用C语言设计开发微控制器程序已成为一种必然的趋势.Franklin C51是一种专门针对Intel 8051系列 ...
- ISBN-10和ISBN-13有什么区别？
ISBN扩升至13位 1. 现有ISBN的结构 国际标准书号ISBN是英文International Standard Book Number的缩写,1971年国际标准化组织ISO(Internati ...
- CF 39E What Has Dirichlet Got to Do with That? （博弈）
转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents by---cxlove 题意:给出a ^ b,两个人轮流操作,可以 a ...