初学画布canvas的chapter1

——这篇读后感是我阅读《写给Web开发人员看的HTML5教程》一书中的第5章画布后的小小看法，由于编程实力有限，很多效果病没有一一去实现，所以只是停留在纸上谈兵的阶段。
画布（canvas）作为HTML5新增的最有趣最出名的元素之一，程序员可以通过canvas元素实现非常多有趣的功能，虽然现今只是停留在2D环境，但未来不排除加入3D等环境的可能；而且我们也可以通过一些方法实现伪3D的效果。
　　要使用元素canvas，我们要先对它进行定义：
　　<canvas width="" height="">
　　</canvas>
　　元素开始与结束标记之间的区域是用于浏览器不支持canvas时显示。
　　定义完元素canvas之后，我们就要在JavaScript中加入绘制命令，首先要引用canvas：
　　var canvas = document.querySelector("canvas");——querySelector是jQuery引入的方法
　　其次要定义它的绘制环境：
　　var context = cnvas.getContext('2d');
　　然后就可以开始绘制了。
　　以下是阅读完第五章后了解到的有关canvas的一些应用：
　　　　矩形，颜色和阴影及渐变
　　　　　　1.矩形可以通过四种方法来创建：
　　　　　　　　context.fillRect(x,y,w,h) ——创建被填充的矩形
　　　　　　　　context.strokeRect(x,y,w,h) ——创建有边框无填充的矩形
　　　　　　　　context.clearRect(x,y,w,h) ——创建橡皮擦
　　　　　　　　context.rect(x,y,,h) ——通过路径创建矩形
　　　　　　2.颜色：
　　　　　　　　FillStyle——定义填充颜色
　　　　　　　　strokeStyle——定义线条颜色
　　　　　　　　颜色的有效值：
　　　　　　　　　　Hexadecimal ——#FF0000
　　　　　　　　　　Hexadecimal(short) ——#F00
　　　　　　　　　　RGB ——rgb(255,0,0)
　　　　　　　　　　RGB(percent) ——rgb(100%,0%,0%)
　　　　　　　　　　RGBA ——rgba(255,0,0,1.0)
　　　　　　　　　　RGBA(percent) ——rgba(100%,0%,0%,1.0)
　　　　　　　　　　HSL ——hsl(0,100%,50%)
　　　　　　　　　　HSLA ——hsla(0,100%,50%,1.0)
　　　　　　　　　　SVG(named color) ——red
　　　　　　3.阴影：
　　　　　　　　context.shadowOffsetX = ——定义阴影的X轴偏移量
　　　　　　　　context.shadowOffsetY = ——定义阴影的Y轴偏移量
　　　　　　　　context.shadowColor = ——定义阴影的颜色及透明度
　　　　　　　　context.shadpwBlur = ——定义阴影的模糊度
　　　　　　4.渐变：
　　　　　　　　var linGrad = context.createl.inearGradient(x0,y0,x1,y1);
　　　　　　　　　　——创建变量存储CanvasGradient对象并通过x0,y0,x1,y1定义渐变方向。
　　　　　　　　linGrad.addColorStop(0.0,’red’); ——代表起点上的颜色
　　　　　　　　linGrad.addColorStop(0.5,’yellow’); ——渐变颜色
　　　　　　　　linGrad.addColorStop(1.0,’purple’); ——代表终点上的颜色
　　　　路径绘图
　　　　　　线段：
　　　　　　　　初始化路径：beginPath()
　　　　　　　　定义路径轨迹：moveTo()和lineTo()
　　　　　　　　画线：stroke()
　　　　　　曲线：
　　　　　　　　context.quadraticCurveTo(cpx,cpy,x,y)
　　　　　　　　context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
　　　　　　弧线：
　　　　　　　　context.artTo(x1,y1,x2,y2,radius)
　　　　　　　　context.arc(x,y,radius.startAngle,endAngle,anticlockwise)
　　　　　　轮廓：
　　　　　　　　context.lineWidth = [] ——定义线条粗细
　　　　　　　　context.lineCap = [] ——定义线条两端线端
　　　　　　　　context.lineJoin = [] ——定义交点
　　　　　　填充：
　　　　　　　　context.fill()
　　　　　　遮罩：
　　　　　　　　context.clip() ——定义路径图不被画出来

 

转载于:https://www.cnblogs.com/jiangwenjie/p/5734588.html