HTML5自学笔记[ 15 ]canvas绘图实例之钟表

【HTML5自学笔记[ 15 ]canvas绘图实例之钟表】的更多相关文章

HTML5自学笔记[ 15 ]canvas绘图实例之钟表

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas绘图小实例之方块移动</title> <style> body{ background:#000;} #canvas1{ margin:100px 500px; background:#fff;} #canvas1 span{ color:#fff;} </style…

HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>炫彩时钟</title> <style> body{ background:#000;} canvas{ background:#fff; } </style> <script src="countdown.js&qu…

HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>马赛克</title> <style> body{background:#000;} canvas{background: #fff; margin-left:500px;} </style> <script> windo…

HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>倒影</title> <style> body{background:#000;} canvas{background: #fff; margin-left:500px;} </style> <script> window…

HTML5自学笔记[ 15 ]canvas绘图基础6

关于线条的一些属性: lineCap,这个属性表示的是线条两端的样式,值有butt(默认)/round/square. lineJoin,这个属性表示线条相交的方式,值有miter(默认)/bevel/round: miterLimit,该属性指定默认情况下lineJoin采用miter方式的极限值:比如,在上面的例子中,将miterLimit设置为1,那么第一个图的两条线的相交方式就会自动转变为bevel.…

HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas绘图小实例之方块移动</title> <style> body{ background:#000;} #canvas1{ margin:100px 500px; background:#fff;} #canvas1 span{ color:#fff;} </style…

HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas绘图小实例之鼠标画线</title> <style> body{ background:#000;} #canvas1{ margin:100px 500px; background:#fff;} #canvas1 span{ color:#fff;} </style…

HTML5自学笔记[ 11 ]canvas绘图基础1

html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支持canvas的浏览器里会显示这行文字,这里的文字颜色要和canvas背景色一致才行: <canvas id="canvas1" width="1000" height="1000"> <span>该浏览器不支持canvas&…

HTML5自学笔记[ 24 ]canvas绘图之星空草地

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ background:#fff;} div{ width:800px; height:600px; margin:0 auto;} canvas{ background:#000;} </sty…

HTML5自学笔记[ 17 ]canvas绘图基础4

绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘制后的图形大小. drawImage(oImg,x1,y1,w1,h1,x2,y2,w2,h2),该方法获取源图像的一部分进行绘制并且指定绘制起点和绘制后图像的大小,x1/y1/w1/h1表示选取源图上(x1,y1)点起宽w1高h1的部分,x2/y2/w2/h2表示将选取的部分绘制到画布(x2,y2…

HTML5自学笔记[ 16 ]canvas绘图基础3

canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量旋转:rotate(弧度),弧度=角度*Math.PI/180:注:多次旋转角度累加. 缩放:scale(x,y),x和y为水平和垂直方向的缩放比. 注意:scale缩放有个弊端,那就是即缩放宽高,又缩放边框的宽度,所有在使用时应该注意.…

HTML5自学笔记[ 14 ]canvas绘图基础2

canvas绘制路径不仅可以绘制直线和多边形,还提供了绘制曲线的方法,利用这些方法可以画出多种曲线效果. 方法1:arc(x,y,r,起始弧度,结束弧度,绘制方向);其中(x,y)为圆心坐标,r为半径,弧度计算公式:deg*Math.PI/180,绘制方向默认为false表示顺时针绘制 ,设置为true时,逆时针绘制. 例1,顺时针绘制0-90°圆弧: oContext.beginPath(); oContext.arc(300,300,200,0,90*Math.PI/180,false);…

HTML5自学笔记[ 23 ]canvas绘图基础7

变换矩阵: transform(a,b,c,d,e,f),多次使用该函数,效果是多次状态改变的累加: setTransform(a,b,c,d,e,f),会忽略之前的变换,从起始状态开始改变.…

HTML5自学笔记[ 18 ]canvas绘图基础5

获取图像数据:getImgData(x,y,w,h),返回的是一个ImageData对象,这个对象有三个属性保存图像信息:width/height/data.data是一个数组,保存了每个像素的信息,一个像素用4个元素保存,分别表示红.绿.蓝和透明度. 创建图像数据:createImgData(w,h),w/h表示图像的大小,返回的也是一个ImageData对象,只要设置好data,就可以用putImgData()将该图像绘制到画布上了. 绘制图像数据:putImgData(imgData,x,…

JAVA自学笔记15

JAVA自学笔记15 @例题1:共有5个学生,请把五个学生的信息存储到数组中,并遍历数组,并获取每个学生的信息 Students[] students=new Student[5]; Student s1=new Student("Jack"); Students[0]=s1;//数组里储存的是一个一个的对象 1.集合类 1)面向对象语言对事物都是以对象的形式,所以为了方便对多个对象进行操作,java提供了集合类 2)数组虽然也可以存储对象,但长度必须是固定的,集合的长度是可变的.数…

Html5 自学笔记

1 html的全称 Hyper Text Markup Language 2 HTML的意义使用标记标签( Markup Tag)来描述网页 3 HTML标签一定成对吗是 4 <html> </html> 它们之间的文本用来描述网页 5 <body></body> 它们之间的文本描述网页上的可见内容 6 html标题标签 h1 到 h5 7 html段落用<p>来定义的 8 html链接 html链接是用<a> 来定义的…

HTML5之Canvas绘图实例——饼状图

实现饼状分布画图(如下):调试环境:Firefox…

Html5 Canvas笔记(2)-Canvas绘图

用Canvas API绘图,需要画图形的边线并设置内部区域填充,边线英文语法对应stroke,填充对应fill,在后面我们会频繁看到这2个英文单词的出现.Canvas API内置的形状绘图函数比较少,可以完成绘制矩形Rect.弧形Arc,也可以画贝塞尔曲线bezierCurver.quadraticCurve.下面我们一个一个的来说. 画线-Line function drawScreen(){ context.strokeStyle='black'; context.lineWidth=10;…

HTML5之Canvas绘图实例——曲线图

实现正弦.余弦和正切函数画图(如下图):调试环境:Firefox…

html5学习笔记：canvas

1.什么是canvas? 可以绘制图形的标签.一般用javascript来绘制. 2.创建一个画布 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <canvas id="mycanvas" width="100" height="100"></canvas> //创…

HTML5学习笔记之canvas

标签 canvas标签有一个默认宽高:300*150: canvas的宽高一般写到行间样式中,写在style会有问题详细请看这里: 绘制环境要绘图先要获取到绘制环境: var oC = document.getElementsByTagName('canvas')[0]; var oGC = oC.getContext('2d'); //有些浏览器支持webgl,可以绘制3D: 绘制方块 fillRect(Left,Top,Width,Height) : 填充方块,默认颜色黑色 strokeR…

HTML5自学笔记[ 10 ]简单的购物车拖拽

用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T: <!doctype html> <html> <head> <meta charset="utf-8"> <title>购物车拖拽</title> <style> *{ margin:0; padding:0;} #proList{ overflow:hidden;} #proList li{ list-style:n…

HTML5自学笔记[ 9 ]HTML5实现元素的拖放

要想在html5中实现元素的拖放,被拖放元素就必须设置属性draggable="true";被拖放元素被放置的地方是另外一个元素,该元素是目标元素:这两个元素在拖放过程中都会触发不同的事件,处理好这些事件才可以完成漂亮的拖放. 被拖放元素触发的事件有: ondragstart:该事件在鼠标按住元素开始拖动时触发. ondragend:该事件在鼠标抬起时触发. ondrag:该事件在dragstart和dragend之间连续触发(即使鼠标不移动). 目标元素触发的事件有: ondrage…

HTML5自学笔记[ 8 ]历史管理

触发历史管理的三种方法: 跳转页面改变hash值 pushState(在服务器环境下运行) 用hash值来触发历史管理: <!doctype html> <html lang="en"> <head> <title>随机产生彩票号码</title> <meta charset="utf-8"/> <script> window.onload = function(){ var oI…

HTML5自学笔记[ 7 ]defer和async

defer:给位于最前面的script标签设置defer="defer",外联js就会在onload触发之前才加载. async:给script标签设置async="async",外联js就会进行异步加载,加载顺序不确定,有依赖关系的js就不要用了,和其他js没有依赖关系的js用这个属性可以提高加载速度.…

HTML5自学笔记[ 6 ]data自定义数据

在标签中添加data-name属性并赋值,在js脚本中用ele.dataset.name就可以获取该属性的值.如: <div id="box" data-age="20">年龄</div> <script> var oDiv = document.getElementById('box'); alert(oDiv.dataset.age); //20 </script> 如果name是用-连接的两个及以上单词来命名,那…

HTML5自学笔记[ 5 ]JSON的新方法

eval和JSON.parse的区别:eval:可以解析任何字符串为js:parse:只能解析JSON形式的字符串变为js(更安全). json格式的字符串中的属性名必须加双引号“”. stringify()方法将json对象转换成严格格式的json字符串. 兼容低版本浏览器:在页面中引入json2.js.…

HTML5自学笔记[ 4 ]js中新增的选择器方法

querySelector():参数与jQuery一样,这个方法获取一组元素中的第一个元素. querySelectorAll():获取一组元素. getElementsByClassName():获取一组class元素. 列表属性classList:返回类数组对象,包含元素所有的class:该对象包含length属性.add()方法.remove()方法和toggle()方法.…

HTML5自学笔记[ 3 ]表单验证反馈

表单控件对象的validity对象可以设置或返回相关的验证信息(在invalid事件处理中获取validity对象): 属性valid:为true所有验证通过,为False至少有一种验证失败. 属性valueMissing:表单控件输入值为空时,该属性值为true:不为空时该属性值为false. 属性typeMismatch:输入的内容不符合控件类型要求时,该属性为true,否则为false. 属性patternMismatch:输入的内容不匹配正则表达式时,该属性为true,否则为false.…

HTML5自学笔记[ 2 ]新增表单控件和表单属性

新增<input>属性type="email",自动验证,若输入不为邮箱,则不能提交. 新增<input>属性type="tel",在移动端切换到数字键盘,其他无变化. 新增<input>属性type="url",自动验证,若输入不为url,则不能提交. 新增<input>属性type="search",输入框内显示删除文本按钮,其他无变化. 新增<input>属性t…