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实现web文件无刷新上传
最近在做如何实现文件上传的相关工作,查阅了很多资料,发现网上写的都不是很直观,且调试复杂,经实验成功. 把form的target设为页面里一个看不见的iframe,这样上传时候就不会刷新页面了,比如 ...
- 【设计模式：单例模式】使用单例模式加载properties文件
先准备测试程序: package org.jediael.util; import static org.junit.Assert.*; import org.junit.Test; public c ...
- HTML+CSS学习
1.彻底弄懂CSS盒子模式(DIV布局快速入门) 2.在CSS中,BOX的Padding属性的数值赋予顺序为padding:10px; 四个内边距都是10px padding:5px 10px; 上下 ...
- ［XMPP］iOS聊天软件学习笔记［一］
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- query通用开源框架
Jquery通用开源框架之[ejq.js] 简介 ejq是一款非常小巧的JS工具库,未压缩才50K,在jquery的基础上对jquery缺失部分作了很好的弥补作用. 优点: 1.具有内置的模板解析引擎 ...
- html css 笔记
cursor其他取值 鼠标移入 auto :标准光标 default :标准箭头 pointer :手形光标 wait ...
- 基于epoll的聊天室程序
epoll相对于poll和select这两个多路复用的I/O模型更加的高效.epoll的函数很简单,麻烦的地方在于水平触发和边沿触发. 用张图来说明下 ET(边沿)只是在状态反转时触发,比如从不可读到 ...
- CEF3 怎样禁止右键菜单
CEF3 怎样禁止右键菜单 (2013-07-30 11:56:34)转载▼标签: cef3 右键菜单 分类: CEF3问题描述:CEF3 嵌入成功后,在网页点鼠标右键,出现英文菜单,应该怎样禁止掉呢 ...
- C# 多线程的自动管理(线程池) 基于Task的方式
C# 多线程的自动管理(线程池) 在多线程的程序中,经常会出现两种情况: 1. 应用程序中线程把大部分的时间花费在等待状态,等待某个事件发生,然后给予响应.这一般使用 ThreadPool(线程 ...
- LeeCode-Merge Sorted Array
Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...