首先利用定义下canvas得样式
- <canvaswidth="1024"height="720"id="canvas"style="border: 1px solid #808080;display: block;margin: 100px auto;>你的游览器不支持canvas</canvas>
这里主要要说的就是宽高,不要在style里面定义,不然会被拉伸。(对于这点,建议大家看下W3c文档,不是很懂)
高度和宽度属性确定画布的宽度和高度的坐标系统,而CSS属性只确定大小的盒子,它会显示。
- var canvas = document.getElementById('canvas');
- var ctx = canvas.getContext('2d');
获取对象,然后获取上下文进行画图。
好的,接下来来个小例子(画弧)
- //设置线宽,颜色(我喜欢通俗的称他为空心画法)
- ctx.lineWidth =2;
- ctx.strokeStyle ='#176785';
- //arc是花弧形,如果用fill的画法的话,会把他封闭起来。
- ctx.beginPath();
- ctx.arc(512,360,100,0.5*Math.PI,1*Math.PI);
- ctx.stroke();
- ctx.closePath();
对于ctx.beginPath();和 ctx.closePath();我觉得是canvas灵魂,一些好的canvas的引擎之所以效率高,他们有很大程度的关系。
1.比如,有些人画的感觉画出来的canvas是带有锯齿状,就是在画布上,绘制了同样一件事情N次之后的效果。
看下面一个例子
- ctx.beginPath();
- ctx.arc(512,360,100,0.5*Math.PI,1*Math.PI);
- ctx.closePath();
- ctx.stroke();
这就是ctx.closePath();的作用,闭合那些线,但是fill的画法默认是带有ctx.closePath();这个功能的,而ctx.beginPath();的作用就是相当于函数中的分割了,分割作用域。
2.例子就举上面的,如果将上面两段代码何必,去掉ctx.beginPath();,那么那段弧形会被绘制两次,而第二个则绘制一次。言下之意就是,假如没有ctx.beginPath();的话,代码中要绘制100个图片,第一个就会绘制100次,第一个99次,总而言之是100+99+98+。。。。。
3.接下来两个小例子。
- //定义一个渐变的颜色,其实坐标,x,y,w,h
- var color = ctx.createLinearGradient(512,460,512,260);
- // 开始颜色,和结束的颜色
- color.addColorStop(0,'#499989');
- color.addColorStop(1,'#176785');
- ctx.beginPath();
- ctx.fillStyle = color;
- ctx.arc(512,360,99,0,2*Math.PI);
- ctx.fill();
- ctx.closePath();
- //绘制文本
- var a =12;
- ctx.font="50px Arial";
- ctx.fillStyle ="#fff";
- //居中
- ctx.textAlign ="center";
- ctx.beginPath();
- //文字内容, 起始坐标,宽度
- ctx.fillText(a,510,375,64);
- ctx.closePath();
4.接下来我们把上面内容结合起来。
。。。。
。。。。
看起来不太舒服,建议自己在电脑上测试:
在线调试唯一地址:http://www.gbtags.com/gb/debug/7400a9ba-51a7-409b-b1f4-b01363b9c625.htm
一个简单的loading写完了,但是里面有很多问题,比如那个fill和text都是有部分重复的绘制,绘制了99次的,其实我主要 想用fill那个圆来取代每次画好的文本还要clear。如果你把文字换种颜色可能明白我的意思了。然后这会导致底部绘制100次,导致底部出现锯齿的样 子。
而且,绘制圆放在前面,就是相当于clearRect的作用,去清除文字。
面对这个问题,不知道大家如何解决的。
相关推荐
Canvas 发光loading动画 --Canvas 发光loading动画 --Canvas 发光loading动画 --Canvas 发光loading动画
用J2ME的CANVAS画布绘制一个小游戏界面
uni-app 利用canvas进行画框,移动框,放大缩小并删除,目前支持小程序,h5,其他没测试过
网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画...
js html5 canvas制作多个小球碰撞的动画效果 js html5 canvas制作多个小球碰撞的动画效果
Android利用canvas画各种图形
html5 canvas画布里面圆球弹跳动画效果代码 html5 canvas画布里面圆球弹跳动画效果代码
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
登录后可直接操作 切换题目与答案画相应的框并拖动拉伸达到你所要的区域,还可以实时修改标题 运行环境 先运行npm install 再运行npm run dev 运行视频 链接: ...
HTML5 Canvas网页发光圆形加载进度条Loading动画 HTML5 Canvas网页发光圆形加载进度条Loading动画
微信小程序,画图板制作 画图,画布canvas,源码下载,
这是一款基于HTML5 Canvas和Rebound动画的Loading加载动画特效。该loading动画使用canvas来覆盖整个页面,并显示多边形的loading加载器来表示加载进度。
canvas拼图游戏,基于html + canvas画布实现
这次我们来看一款非常酷的Loading动画加载效果,和纯CSS3实现齿轮Loading加载动画类似,也是利用几何的特性来模拟的,它是一些类似旋转的动画效果。另外,关于Loading动画,我们也可以看看html5tricks上的Loading...
利用canvas 画布制作逼真的水滴特效.docx
基于canvas画一个太极图
微信小程序canvas画布绘制矩形、椭(圆)、直线、文字
这个canvas例子中包含了许多canvas实际运用中的小技巧,相信你如果原因花点时间来研究一下,一定会受益匪浅。
canvas动画-星空效果动画
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果