html5学习笔记:canvas
1.什么是canvas?
可以绘制图形的标签。一般用javascript来绘制。
2.创建一个画布
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="mycanvas" width="100" height="100"></canvas> //创建画布用canvas标签
</body>
</html>
3.在画布上绘图。
<script type="text/javascript">
//用javascript来绘制图像
//获取到canvas元素
var can=document.getElementById("mycanvas");
//创建html5的内置对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var draw=can.getContext("2d");
//fillStyle();可以是css的颜色,渐变,图案
draw.fillStyle="red";
//fillRect(x,y,width,height) 定义填充方式
draw.fillRect(0,0,125,12);
</script>
4.canvas-路径
var can=document.getElementById("mycanvas");
var draw=can.getContext("2d");
// 开始一个路径
draw.beginPath();
// 设置线的粗细
draw.lineWidth="5";
//设置线的颜色
draw.strokeStyle="green";
// 线的起点
draw.moveTo(0,75);
//线的终点
draw.lineTo(250,75);
// 开始绘制路径
draw.stroke();
//开始另一个路径
draw.beginPath();
// 设置线的粗细
draw.lineWidth="5";
draw.strokeStyle="purple";
draw.moveTo(25,05);
draw.lineTo(35,25);
draw.stroke();
效果:
// 其他路径的绘制
arc(x,y,r,start,stop); //画圆
5.canvas-文本
1 // 3绘制文本
2 var can=document.getElementById("mycanvas");
3 var draw=can.getContext("2d");
4 // 设置字体的大小
5 draw.font="30px Arial";
6 //绘制出文字,确定文字的位置
7 draw.fillText("Hello World ",10,25);
8 //绘制空心文字
9 draw.strokeText("Hello",10,25);
6.canvas-渐变
var can=document.getElementById("mycanvas");
var draw=can.getContext("2d");
// 创建渐变
// 先创建一个线条渐变
var grd=draw.createLinearGradient(0,0,200,0);
// 设置渐变的停止位置,以及颜色
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//绘制渐变图形
draw.fillStyle=grd;
draw.fillRect(10,10,120,80);
//圆渐变
ctx.fillRect(10,10,150,80);
html5学习笔记:canvas的更多相关文章
- [html5] 学习笔记-Canvas应用
通过使用HTML5游戏开发的引擎CreatJS,创建HTML5 Canvas上的更好交互. 1.认识CreateJS CreateJS是一个外部库,用它可以比Canvas更方便的绘制图形. 官网:ht ...
- [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形
在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...
- [html5] 学习笔记-Canvas标签的使用
Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- HTML5 学习笔记(一)——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- HTML5 学习笔记--------》HTML5概要与新增标签!
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
- HTML5学习笔记(一):HTML简介
Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...
随机推荐
- 漫谈可视化Prefuse(六)---改动源码定制边粗细
可视化一路走来,体会很多:博客一路写来,收获颇丰:代码一路码来,思路越来越清晰.终究还是明白了一句古话:纸上得来终觉浅,绝知此事要躬行. 跌跌撞撞整合了个可视化小tool,零零碎碎结交了众多的志同道合 ...
- 35款加速网站开发的 CSS 开发工具
网络有很很多的 CSS 工具和教程可用,它可以帮助设计人员和开发人员轻松.快速地学习 CSS 技术.这些工具中在高效开发 Web 应用程序中发挥重要作用. 在这篇文章中,我们收集了35个最好的 CSS ...
- Cordova webapp实战开发:(1)为什么选择 Cordova webapp?
很长时间没有专注写代码了,即使写点代码也主要是写写敏捷个人app,这个App主体内容是我用了一周的时间,使用PhoneGap+JQueryMobile搭建的,之所以会比较快的完成,是因为11年我在做建 ...
- java设计模式学习(-)
在我目前看来博客的作用就是笔记了,所谓的原创也仅仅是复制了别人的东西实践了一下,但为了学习记忆确实要记录下来.在这里感谢网络各处的资源,原谅我对资源的索取. 接下来每天开始学以则设计模式或者几天学一则 ...
- UsefulSQL
FindObject: ---在当前Server上找某某object,注意只需修改"要找的object"就可以使用EXEC sp_MSforeachdb 'use ? ;IF EX ...
- 九、SDP
1. SDP 1.1 服务概述 SDP, Service Discovery Protocol,服务发现协议. 1.1.1 概念 SDP提供了一种用于发现服务及这些可用服务 ...
- [译]学习IPython进行交互式计算和数据可视化(二)
第一章:开始使用IPython 在本章中,我们首先进行一遍IPython的安装过程,在大概浏览一下IPython提供的功能.IPython提供了一个高度优化的Python控制台和Notebook.除此 ...
- Ubuntu14.04安装postgresql9.4
安装前的检查 首先查看是否已经安装了旧版本: dpkg -l |grep postgresql 如果已经安装了某个版本的postgresql,请先卸载. 安装postgresql 添加postgres ...
- Node.js系列基础学习-----回调函数,异步
Node.js基础学习 Node.js回调函数 Node.js异步编程的直接体现就是回调,异步编程依托回调来实现,但不是异步.回调函数在完成任务后就会被调用,Node有很多的回调函数,其所有的API都 ...
- Mailbox unavailable. The server response was: 5.1.1 User unknown
昨晚至今早,在新的项目中,实现一个小功能,就是当有访问者浏览网页在留言簿留言时,系统把留言内容发送至某一个邮箱或是抄送指定的邮箱中. 使用以前能正常发送邮件的代码,但在新项目中,测试时,就是出现标题的 ...