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> < ...
随机推荐
- php读取和保存base64编码的图片内容
<?php header('Content-type:text/html;charset=utf-8'); //读取图片文件,转换成base64编码格式 $image_file = './429 ...
- python笔记之hashlib模块
涉及加密服务:14. Cryptographic Services其中 hashlib是涉及安全散列和消息摘要,提供多个不同的加密算法借口,如SHA1.SHA224.SHA256.SHA384.SHA ...
- “弹出DVD驱动器错误”解决方法
错误描述:(win7环境) 买了个开发板,赠送了一些光盘,放在电脑光驱中打开后,电脑就疯狂响,可能是光盘质量太差.用完后在弹出时显示“弹出DVD驱动器错误”[见图1].直接按主机上弹出按钮也没有反应. ...
- c#实现生产者消费者模式
; } Environment.ExitCode = result; } }}
- Discuz!X2.5论坛在IIS和Apache环境配置实现伪静态
最近在研究自己的网站,然后把这文章分享出来,让不清楚怎么设置的童鞋参考,高手可以飘过~~~ URL 静态化是一个有利于搜索引擎的设置,通过 URL 静态化,达到原来是动态的 PHP 页面转换为静态化的 ...
- Yslow-23条规则编辑
1. 减少HTTP请求次数 合并图片.CSS.JS,改进首次访问用户等待时间. 2. 使用CDN 就近缓存==>智能路由==>负载均衡==>WSA全站动态加速 3. 避免空的 ...
- MongoDB insert performance rapidly dropping
http://dba.stackexchange.com/questions/65554/mongodb-insert-performance-rapidly-dropping http://www. ...
- C#操作XML文档(XmlDocument、XmlNode、XmlAttribute、SelectSingleNode、SelectNodes、XmlNodeList)
XML文档是一种通用的文档,这种文档既可以用.config作为后缀也可以用.xml作为后缀.XML文档主要由元素节点和节点的属性共同构成的.它有且仅有一个根节点,其他的节点全部都是根节点的子节点或者子 ...
- COM组件开发实践(七)---多线程ActiveX控件和自动调整ActiveX控件大小(上)
声明:本文代码基于CodeProject的文章<A Complete ActiveX Web Control Tutorial>修改而来,因此同样遵循Code Project Open L ...
- python爬取某个网页的图片-如百度贴吧
python爬取某个网页的图片-如百度贴吧 作者:vpoet mail:vpoet_sir@163.com 注:随意copy,不用告诉我 #coding:utf-8 import urllib imp ...