html5-canvas
_Slience_
这个作者很懒,什么都没留下…
展开
-
【坑】在chrome浏览器中不能显示用context.drawImage画出的图
问题产生在学习context给画布画图像的时候发现使用Firefox浏览器可以正常显示图像,而chrome则不行,经百度后知道是因为chrome浏览器会先加载javascript代码,之后才加载图片,这样就造成了我是用drawImage的时候那个图片并没有加载出来。解决办法把画图片到canvas的代码放在在image对象上onload事件中,就像这样image.onload = f原创 2015-08-09 15:38:22 · 18196 阅读 · 0 评论 -
《HTML5 Canvas核心技术——图形、动画与游戏开发》第三章要点汇总
笔记点使用context.measure("W").width可以获取当前context下W的绘制在canvas上的宽度通过指定fillText、strokeText中的最后一个参数就可以实现插入canvas的字段指定宽度使用context.createLinearGradient来实现绘制文本的颜色渐变使用context.createPattern来实现绘制文本用image来填充在线原创 2015-08-19 08:35:06 · 17847 阅读 · 0 评论 -
【实例】html5-canvas中实现背景图片的移动
本例来自于《HTML5 Canvas核心技术 图形、动画与游戏开发》在线演示 (图有点多,请多刷新几次)本例还有一点代码不理解,我用注释和问号标注出来了,有大神看到求解答,谢谢本例子难点主要在通过当前的FPS计算图像下一帧的显示坐标,这也是我不理解的地方还有就是requestAnimationFrame这个,这个是用来以浏览器最合适的方式循环执行一些代码原创 2015-09-03 17:21:59 · 23755 阅读 · 2 评论 -
【实例】html5在canvas上绘制坐标轴
直接上代码 #canvas { border: thin solid red; } var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //水平标尺与canvas的距离 var H转载 2015-08-17 16:37:42 · 22343 阅读 · 0 评论 -
【实例】html5-canvas上实现图片的颠倒效果
在线演示 #canvas { border: thin solid black; } var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var image = new原创 2015-08-31 11:11:54 · 18777 阅读 · 0 评论 -
【坑】html5-canvas中使用clip抠出一个区域
本想在一个fillRect中抠出一个区域来给我用的,这个是在学clip方法的时候用到的但是怎么也弄不出扣的区域,代码如下 var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.fillStyle = "l原创 2015-08-16 11:58:58 · 21706 阅读 · 0 评论 -
【实例】【html5】在canvas获取鼠标的坐标
方法使用onmousemove来实时获取当前鼠标移动事件,以刷新新的坐标使用canvas.getBoundingClientRect()获取当前画布的位置信息实现在线演示 #canvas { border: thin solid blue; } var canvas = documen原创 2015-08-09 07:50:31 · 47205 阅读 · 0 评论 -
【实例】html5-canvas绘制线段、矩形和圆
关键点鼠标按住之后实现绘图的预览,松手之后才真正画在canvas中绘制圆形的时候需要对圆的大小方位进行控制需要对当前鼠标的坐标进行精准的定位代码实现 #canvas { border: thin solid black; cursor: crosshair; } 辅助线间距 辅助线颜色原创 2015-08-15 19:50:41 · 17077 阅读 · 0 评论 -
【坑】【实例】【未解决】html5-canvas中实现图片的浮雕效
在线演示 #canvas { border: thin black solid; } var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var image = new Ima原创 2015-08-30 20:31:48 · 17426 阅读 · 0 评论 -
【实例】html-canvas中实现图片的放大
摘自《HTML5 Canvas和性技术:图形、动画与游戏开发》转载 2015-08-29 20:41:02 · 17083 阅读 · 0 评论 -
【坑】【未解答】使用canvas中的arcTo绘制圆角矩形遇到的问题
书中给的代码示例如下 var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); drawRoundRect(100, 100, 200, 200, 50); function drawRoundRect(x, y, w, h原创 2015-08-13 16:13:51 · 17411 阅读 · 1 评论 -
【实例】html5-canvas中实现绘制虚线的方法
解决思路我们使用类似moveTo加lineTo的方法绘制一段一段的线段moveTo的方法不需要改动,我们只要把lineTo的方法改成绘制虚线就好,这时我们就需要一个新的方法来绘制虚线新的方法需要获取moveTo中的坐标,以便向lineTo那样与moveTo方法产生关联在新方法中我们要算出这个虚线总共有多少条线段,每条线段的起点终点的位置在实际的绘制每段线段中我们应该交替使用moveTo原创 2015-08-12 22:23:08 · 28279 阅读 · 1 评论 -
【实例】html5-canvas通过鼠标绘制线段
body { background: #eeeeee; } #controls { position: absolute; left: 25px; top: 25px; } #canvas { background: #ffffff; cursor: pointer; mar原创 2015-08-12 19:21:59 · 21816 阅读 · 3 评论 -
【坑】html5中使用context.lineWidth设置线的宽度是1,然而输出的宽度是2的原因
var context = document.getElementById("canvas").getContext("2d"); context.beginPath(); context.lineWidth = 1; context.moveTo(100, 100); context.lineTo(600, 100);原创 2015-08-11 19:35:22 · 18467 阅读 · 0 评论 -
【坑】html5中使用canvas绘制两个strokeRect之间忘了用beginPath()
代码 canvas { border: thin solid black; } var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); co原创 2015-08-11 09:13:50 · 17584 阅读 · 0 评论 -
【实例】小球运动,像皮筋那样
在线演示点击框中任意位置,之后拖动鼠标确定运行的方向和力度之后松开鼠标小球运动 #canvas { border: thin solid black; } var canvas = document.getElementById("canvas"); var context = canvas.getC原创 2015-09-04 10:57:01 · 17279 阅读 · 0 评论