canvas (smile)
来源:互联网 发布:福州java兼职 编辑:程序博客网 时间:2024/04/29 00:09
今天我在学习html5新增加的标签——canvas 画布,他像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。
context:一直觉得这个翻译成“上下文”真够蛋疼的,context是一个封装了很多绘图功能的对象,获取这个对象的方法是
var context =canvas.getContext("2d");
canvas元素绘制图像的时候有两种方法,分别是
context.fill()//填充
context.stroke()//绘制边框
style:在进行图形绘制前,要设置好绘图的样式
context.fillStyle//填充的样式
context.strokeStyle//边框样式
context.lineWidth//图形边框宽度
颜色的表示方式:
直接用颜色名称:"red" "green" "blue"
十六进制颜色值: "#EEEEFF"
rgb(1-255,1-255,1-255)
rgba(1-255,1-255,1-255,透明度)
绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)
清除矩形区域 context.clearRect(x,y,width,height)
圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
路径 context.beginPath() context.closePath()
细心的朋友会发现上面的画圆并不单单是直接用arc还用到了context的 beginPath 和closePath方法
绘制线段 context.moveTo(x,y) context.lineTo(x,y)
绘制贝塞尔曲线(贝济埃、bezier) context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)
线性渐变 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)
线性渐变颜色lg.addColorStop(offset,color)
canvas 还有一些其他的方法,我就不一一例举出来咯
下面是我用canvas写的一个canvas小例子,比较简单
如果要写一些复杂一点的效果,js是功底一定要深厚。
html代码:
<canvas id="canvas" width='400' height="300">你的浏览器不支持canvas</canvas>
js代码:
function drawRadian(){ var context = document.getElementById('canvas').getContext('2d'); context.beginPath(); context.strokeStyle = "rgb(0,0,0)"; context.arc(100,100,100,0,2*Math.PI,true); context.closePath(); context.fillStyle = 'rgb(244,86,86)'; context.fill(); context.beginPath(); context.arc(50,75,25,0,2*Math.PI,true); context.fillStyle = 'rgb(0,0,0)'; context.fill(); context.beginPath(); context.arc(150,75,25,0,2*Math.PI,true); context.fillStyle = 'rgb(0,0,0)'; context.fill(); context.beginPath(); context.arc(150,75,25,0,2*Math.PI,true); context.fillStyle = 'rgb(0,0,0)'; context.fill(); context.beginPath(); context.arc(100,125,10,0,2*Math.PI,true); context.fillStyle = 'rgb(0,0,0)'; context.fill(); context.beginPath(); context.strokeStyle = "rgb(0,0,0)"; context.lineWidth = 5; context.arc(100,150,25,Math.PI/6,5*Math.PI/6,false); context.stroke(); }效果图:
希望对小伙伴的你有所帮助,如果其中有什么不妥当的地方,请多多指出,在这里真诚的感谢你!
- canvas (smile)
- Smile
- Smile
- Smile
- smile
- smile
- smile
- Smile
- smile
- Smile And Remain Smile
- Java 机器学习库Smile实战(一)SVM
- Java 机器学习库Smile实战(二)AdaBoost
- Java 机器学习库Smile实战(一)SVM
- Java 机器学习库Smile实战(二)AdaBoost
- happy~smile
- 微笑Smile
- smile图
- Smile Format
- python contextManager详解
- pyqt4文档阅读(11):QKeySequence
- paypal退款
- Android音乐播放器
- 解决PHP在IE浏览器下载文件,中文文件名乱码问题
- canvas (smile)
- 当我们需要刷新一个数据时而那个界面又离我们太远 这时候我们可以用代理把他写出去, 首先写一个全局refresh类
- 161. Max Points on a Line
- CountDownLatch
- 用POST和GET获取URL后的参数问题
- JS实现跑马灯效果
- java ArrayList中嵌套小集合并打印
- 指针函数和函数指针
- HDU 1059Dividing