html canvas核心技术学习笔记
黑发
我是一只小小小鸟
展开
-
写canvas程序的格式规范以及一些注意事项
html5 canvas规范格式如下html>html>head lang="en"> meta charset="UTF-8"> title>title> style> *{ margin: 0; padding: 0; } #mycanvas{原创 2015-04-24 21:35:57 · 858 阅读 · 0 评论 -
canvas使用图案来对图形和文本进行描边和填充
之前介绍了颜射和渐变色对图形和文本进行描边和填充,这里介绍使用图案对图形和文本进行描边和填充。一:调用到的方法createPattern()来创建图案。该方法有两个参数,第一个是以个html元素,可以是Image,canvas,video元素,第二参数的有效值(repeat,repeat-x,repeat-y,no-repeat)对图形进行描边填充时,使用的模式。。二:原创 2015-05-05 21:47:25 · 1090 阅读 · 0 评论 -
绘制简单的矩形
绘制简单的矩形一;这里canvas 提供里矩形绘制的三个方法用于清除内容:clearRect(x,y,width,height)描边:strokeRect(x,y,width,height)填充:fillRect(x,y,,width,height)二:strokeRect()的一些属性lineJoin,指定矩形边角的形状:这一属性的默认值是 "miter",它说明了两条线原创 2015-05-04 16:06:43 · 433 阅读 · 0 评论 -
canvas绘制之渐变色
一渐变色分为线性渐变和放射渐变2d绘制环境通过调用线性渐变:createLineGradient(x,y,width,height),放射渐变:createRadialGradient(x0,y0,r0,x1,y1,r2) x0,y0是起始点坐标r0是半径范围二:代码示例:/** * Created by Administrator on 2015/5/2.原创 2015-05-04 19:41:52 · 1486 阅读 · 0 评论 -
canvas绘制时的颜色与透明度
一 指定css样式颜色和透明度的方式1 #ffffff(白色) 用16进制表示2 rgb(red/green/blue,红/绿/蓝)从表中我们可以得到规律:颜色的HEX到rgb的转换,例如aqua值是#00FFFF,00-->0,FF-->255(FF=15*16+15*1)3 rgba(red/green/blue/alpha,红/绿/蓝/透明度) 透明度的值是从原创 2015-05-04 19:16:24 · 6547 阅读 · 0 评论 -
使用浮动div元素来实现橡皮筋式截取选取框(鼠标监听事件)
一 说明:橡皮筋式选取框是让用户在canvas之中选取某个区域,将该区域 放大。起初该canvas会显示一幅图像,,当你选取某个区域,应用程序就会放大该区域。。二总体思路:加载图像onmousedown,获取用户开始选取的点(x,y),onmousemove获取用户鼠标拉动的点(x,y)并开始绘制选取的框onmouseup 当用户鼠标不再是点击着的状态时结束选取原创 2015-05-03 20:37:31 · 1088 阅读 · 0 评论 -
用canvas 写时钟程序之绘制各个边沿的时间点
画完圆形之后,开始绘制在各个边沿的数值,一,遇到连个canvas 文本对象属性measureText(),fillText()1, context.measureText(message): 当我们提供一个文本message,调用此方法, 它会依据当前context设置的字体、大小等,返回一个文本的度量信息对象TextMetrics; 当前html5 canvas中Text原创 2015-04-25 10:28:06 · 615 阅读 · 0 评论 -
canvas基本时针程序
canvas时钟程序终于写完了,在计算那些角度换算时,说明学好数学真的很重要,没有良好的逻辑思路理解的有点蛋疼!想当年我数学是那么溜,现在却,咳咳好汉不提当年勇。花了半天吧canvas基本时钟程序都理解了,并且自己加了一个小美观的分钟点函数。js代码如下:/** * Created by Administrator on 2015/4/22. */var canvas = d原创 2015-04-25 12:46:15 · 505 阅读 · 0 评论 -
精灵坐标查看器代码
一:写精灵查看器的总思路:1监听鼠标事件我这里用onclick,当点击鼠标时,触发函数windowTocanvas(),drawBackground(),drawSpritesheet(),drawGuidelines()2windowToCanvas()实现相对于window窗口坐标到相对于canvas坐标的转化,要传进的canvas,window的x,y坐标参数3drawSpr原创 2015-04-29 15:40:31 · 1346 阅读 · 0 评论 -
用canvas 写时钟程序时遇到的API
废话不多说,博主很正经的。。。。 一, 绘制圆形时,用到接口beginPath(),arc(),stroke(), 1,beginPath是开始定义路径(没画), 2,arc()是定义你要绘制什么样的圆弧,也没开始画其格式是,context.arc(x, y, radius, startAngle, endAngle, anticlockwise) 3,str原创 2015-04-24 21:55:10 · 324 阅读 · 0 评论 -
canvas context2d绘制路径
一canvasRanderingConetxt2D之中与路径相关的方法1 arc(x,y,r,angle1,angle2,boolean),其参数分别是x,y坐标点,起始角度angle1, 结束角度angle2 ,,boolean取决绘制是顺时针还是逆时针2 rect(x,y,width,height)参数x,y,坐标,矩形的宽width,高height,该方法总是按逆时针方向创建路径原创 2015-05-06 15:12:56 · 571 阅读 · 0 评论