[js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
有了前面的canvas基础之后，现在开始就精彩了，后面写的canvas教程都是属于综合应用，前面已经写了常用的canvas基础知识,参考链接如下： [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法 [js高手之路] html5 canvas系列教程 ...
原文：[js高手之路]html5 canvas教程 - 1px问题以及绘制坐标系网格
在canvas中，要画出 px的线条，默认情况下是不行的 上述代码中，context是canvas的上下文，在这段代码中，我画了 条线，上面那条线并不是 px，下面的那条线才是 px 上面你可能还看不清楚，那条黑线到底是不是 px，你可以把他们放到画图软件或者photoshop中，放大，然后打开坐标，就能看到如下效果： 很明显，这条黑线，占据的是 行，就是 px大小，而红线占据了一行，才是真正的 ...
2017-10-18 17:54 0 2634 推荐指数：
相关推荐
[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)
绘制曲线，经常会用到路径的知识，如果你对路径有疑问，可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc：画弧度 cxt.arc( x, y, 半径, 开始角度，结束角度，是否逆时针 ); x, y ...
[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法
canvas是html5中引入的一个新元素，俗称画布，既然是画布，当然是用来画图的。canvas技术指的是利用javascript操作canvas元素绘制图形的技术，要使用canvas,一定要浏览器支持canvas，谷歌和火狐的支持性很好，IE8不支持。你可以参考这个网站，查看canvas的支持性 ...
[js高手之路] html5 canvas动画教程 - 匀速运动
匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为0，从定义可知，在任何相等的时间间隔内，速度大小和方向是相同的。 上述实例让一个半径20px的小球 从x=0, y=canvas高度的一半，以每帧2px ...
[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续，本文介绍的内容是canvas开发，特别是游戏中，比较常用的内容：图片处理。在游戏中的资源大多数都是加载图片 ...
[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一、直线的绘制 cxt.moveTo( x1, y1 )： 将画笔移动到x1, y1这个点 cxt.lineTo( x2, y2 )：将画笔从起点开始画直线，一直画到终点坐标( x2 ...
[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解
路径在canvas绘图中，经常被用到，是一个非常重要的概念. 比如：我们要在canvas画出3条直线，要求用不同的颜色加以区分. 在画每一条线之前，我都用storeStyle设置了线的颜色，但是，出来的结果却是3条黄色的线，并不是红、橙、黄三条颜色不同的线 ...
[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文，写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)，本文主要是关于线条的样式设置 lineWidth: 设置线条的宽度，值是一个数值，如lineWidth = 5. 画3条不同宽度的线条 ...