boia

上一篇画了一条斜线，估计大家画了线以后都在想着如何去画网上面内些奇妙的动画，你一定会想:内些效果是怎么画出来的呢。但是我在这里告诉一下大家，心急吃不了热豆腐，每个人都是从基础一步步走过来的，从不懂到精通是需要一个漫长的步骤的，你越急，学的速度反而会很慢，所以这一篇还是画线有关的，有多条线画出一个“米字”，如果你对上一篇的JS代码已经懂得画，你可以不要看我的代码，自己写出来，先贴效图代码不一

var mycanvas = document.getElementById("mycanvas"); var context = mycanvas.getContext("2d"); //context.fillStyle = "red"; for(var i=0;i<6;i++) { for(var j=0;j<6;j++) { //context.beginPath

var mycanvas = document.getElementById("mycanvas"); var context = mycanvas.getContext("2d"); context.fillStyle = "#ff0"; context.fillRect(0,0,150,150); context.fillStyle = "#0f0"; context.fillR

var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); var canvasGra = context.createLinearGradient(0,0,0,500); canvasGra.addColorStop(0,"rgba(255,0,0,0.5)")

前两天我一直搞不懂坐标变换的内3个函数，按手册上的去写代码，发现实现的代码和手册上说的代码不一样，所以决定自己好好地研究一下，后来明白了，我总喜欢把函数写在路径后面，所以实现不了变换，今天在网上闲逛的时候看到一个马尾图案，我就试着画了一个，实现的思路应该有两种，但代码却可以有N种，代码如下 var myCanvas = document.getElementById("myCa

貌似是很久没碰数学的缘故，今天计算如何绘制一个五角星特别地费力，看来还得好好地学下高数啊，太虚假了~~~不过计算出来后还是有一点小小的错误，有两条边有点误差，大家就凑合看吧，不要见怪 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); //创建

var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); var wise = true; context.lineWidth = 3; context.strokeStyle = "blue"; context.fillStyle = "red"; for

今天在canvas看见两个方法用来绘制贝塞尔曲线，我觉得很好奇，就点开了参考手册的说明，但令我失望了，几乎什么也没有，只有那么一句话，贝塞尔曲线的数学原理超过了本参考页的范围。好吧，看来有些东西就得靠自己，在百度搜索了下贝塞尔曲线，百度文科解释的还是挺透彻的，明白了以后，就开始操作了，代码很简单，如下 var myCanvas = document.getElementBy

每当心情不好的时候想到的第一件事儿就是写代码，每次写代码的时候总可以在较短的时间忘却一些烦恼，不解释，代码如下 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); context.strokeStyle = "blue"; contex

路径是canvas里很重要的一个概念，刚开始学canvas的人对路径理解不是很深，他们在用canvas的时候会乱用beginPath(),今天做了一个小demo来说明一下路径看代码: var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); con

上一篇中写了滤镜的效果，这一次把滤镜效果写在圆上，和上一篇原理是一样的先截个图：代码如下 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); context.fillStyle = "#e4e4e4";

代码很简单，稍微会点canvas的应该就可以看懂 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); context.fillStyle = "red"; context.fillRect(50,50,100,100); context.fil

在某个论坛游荡的时候，看到一个笑脸图样，就用canvas写了一个，代码如下 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); context.strokeStyle = "blue"; context.lineWidth = 5;

前端时间，听周围的朋友和同学说html5不好学，去论坛还有各大网站看，在国内也没有真正地开始发展。也见到了专业好多哥们儿（不是计算机专业）学了一半就放弃了，我觉得也情有可原吧，终归编程也是需要耐得住寂寞的行业，去学一门语言，你要没有毅力去克服初学这道难关，你确实只能处于入门这个阶段，我不算过来人（相对于在这个行业混了十几年的甚至几十年的人来说），记得有一个所谓的过来人跟我说，编程是一个体力活，这点

#myCanvas{border:3px solid blue;} window.onload = function() { var mycanvas = document.getElementById("myCanvas"); var context = mycanvas.getContext("2d"); context.lineWidth = 2

现在网络最火的是html5，没有之一，虽然正式版还没有出，但咱们可以期待着在未来几年，html5会霸占了互联网，所以毫无疑问得加入到html5的学习之中，谁学得快，谁就有可能把握住新时代的潮流，今天开始最简单的html5的学习，画线，画线是动画的基础，可能你会说花点才是基础，的确如此，canvas上的画就是一个个像素组成的。下面是今天写的一个程序，简单易懂 window.onload

前两天用html5做了一个手机管家上查毒的旋转条，发个教程http://boia.github.io/blog/2013/04/23/process/