怎么画线条?和现实中画画差不多:
1.移动画笔,使画笔移动至绘画的开始处
2.确定第一笔的停止点
3.规划好之后,选择画笔(包括画笔的粗细和颜色等)
4.确定绘制
因为Canvas是基于状态的绘制(很重要,后面会解释),所以前面几步都是在确定状态,最后一步才会具体绘制。
1.移动画笔(moveTo())
之前我们获得了画笔context,所以以此为例,给出改方法的使用实例——context.moveTo(100,100)。这句代码的意思是移动画笔至(100,100)这个点(单位是px)。记住,这里是以canvas画布的左上角为笛卡尔坐标系的原点,且y轴的正方向向下,x轴的正方向向右。
2.笔画停点(lineTo())
同理,context.lineTo(600,600)。这句的意思是从上一笔的停止点绘制到(600,600)这里。不过要清楚,这里的moveTo()``lineTo()都只是状态而已,是规划,是我准备要画,还没有开始画,只是一个计划而已!
3.选择画笔
这里我们暂且只设置一下画笔的颜色和粗细。
context.lineWidth = 5,这句话的意思是设置画笔(线条)的粗细为10px。
context.strokeStyle = "#AA394C",这句话的意思是设置画笔(线条)的颜色为玫红色。
因为Canvas是基于状态的绘制,所以我们在选择画笔粗细和颜色的同时,其实也是选择了线条的粗细和颜色。
4.确定绘制
确定绘制只有两种方法,fill()和stroke(),有点绘画基础的应该知道,前者是指填充,后者是指描边。因为我们只是绘制线条,所以只要描边就可以了。调用代码context.stroke()即可。
画一个线条
不就一条线段吗!废话了这么多!那我们就开始画吧。
JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!
运行结果:
我还标注了一个页面解析图,供大家参考。
这里我将原本
标签中的width和height去掉了,但在JavaScript代码中设置了canvas对象的width和height的属性。
小结:要设置画布的大小,只有这两种方法
1.在标签中设置;
2.在JS代码中设置canvas的'属性.
怎么样,是不是非常的酷。接下来我们要加快脚步了,绘制一个多线条组成的图形。是不是感觉自己离艺术家又进了一步呢?别看这只是简简单单的一条线段,这一画只是我们的一小步,但却是人类的一大步!
绘制折线
上面我们已经成功绘制了一条线段。那么,如果我要绘制有两个笔画甚至是很多笔画的折线怎么办呢?
聪明的小伙伴肯定已经想到了,这还不简单,复用lineTo()就可以了。下面我就献丑随便画了一条优美的折线~
JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!
运行结果:
绘制多条折线
那同理,我们要绘制多条样式各不相同的折线怎么办呢?比如我们在这里画三条折线,分别是红色、蓝色、黑色。聪明的小伙伴肯定想到了,这还不简单,只需要平移一下再改下画笔颜色就行了。代码格式都一样的,复制就可以了。代码如下。
JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!
运行结果:
咦?是不是很奇怪?说好的先红色,再蓝色,再黑色呢?怎么全是黑色了?其实,这里的原因是我之前一直强调的一点——Canvas是基于状态的绘制。
什么意思呢?其实这段代码每次使用stroke()时,它都会把之前设置的状态再绘制一遍。第一次stroke()时,绘制一条红色的折线;第二次stroke()时,会再重新绘制之前的那条红色的折线,但是这个时候的画笔已经被更换成蓝色的了,所以画出的折线全是蓝色的。换言之,strokeStyle属性被覆盖了。同理,第三次绘制的时候,画笔颜色是最后的黑色,所以会重新绘制三条黑色的折线。所以,这里看到的三条折线,其实绘制了3次,一共绘制了6条折线。
那么,我想绘制三条折线,难道就没有办法了吗?艺术家之魂到此为止了么?没救了么?不,还有办法。
使用beginPath()开始绘制
为了让绘制方法不重复绘制,我们可以在每次绘制之前加上beginPath(),代表下次绘制的起始之处为beginPath()之后的代码。我们在三次绘制之前分别加上context.beginPath()。
JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!
可以看到,这里得到了我们预想的结果。因为使用了beginPath(),所以这里的绘制过程如我们所想的那样,只绘制了三次,而且每次只绘制一条折线。beginPath()是绘制设置状态的起始点,它之后代码设置的绘制状态的作用域结束于绘制方法stroke()、fill()或者closePath(),至于closePath()之后会讲到。
所以我们每次开始绘制前都务必要使用beginPath(),为了代码的完整性,建议大家在每次绘制结束后使用closePath()。
canvas绘图通过属于 canvas 的 JavaScript 方法完成
针对不支持html5的IE浏览器
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
提示:canvas的绘图过程(即填充与描边)是非常消耗资源的,如果想节省系统资源提高效率,最好是绘制好所有路径,再一次性填充或描边图形。
canvas 方法
方法
用途
getContext(contextId) 公开在 canvas 上绘图需要的 API。惟一(当前)可用的 contextID 是 2d。
height 设置 canvas 的高度。默认值是 150 像素。
width 设置 canvas 的宽度。默认值是 300 像素。
createLinearGradient(x1,y1,x2,y2) 创建一个线性渐变。起始坐标为 x1,y1,结束坐标为 x2,y2。
createRadialGradient(x1,y1,r1,x2,y2,r2) 创建一个放射状渐变。圆圈的起始坐标是 x1,y1,半径为 r1。圆圈的结束坐标为 x2,y2,半径为 r2。
addColorStop(offset, color) 向一个渐变添加一个颜色停止。颜色停止(color stop) 是渐变中颜色更改发生的位置。offset 必须介于 0 到 1 之间。
fillStyle 设置用于填充一个区域的颜色 — 例如,fillStyle='rgb(255,0,0)'.
strokeStyle 设置用于绘制一根直线的颜色 — 例如,strokeStyle='rgb(255,0,0)'.
fillRect(x,y,w,h) 填充一个定位于 x 和 y,宽度和高度分别为 w 和 h 的矩形。
strokeRect(x,y,w,h) 绘制一个定位于 x 和 y,宽度和高度分别为 w 和 h 的矩形的轮廓。
moveTo(x,y) 将绘图位置移动到坐标 x,y。
lineTo(x,y) 从绘图方法结束的最后位置到 x,y 绘制一条直线。
1、绘制矩形:用到fillRect
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>canvas绘制图形</title></head><body><canvas id="myCanvas" width="500" height="500"></canvas><script type="text/javascript">
var canvas=document.getElementById("myCanvas") //canvas 元素被设置为一个 JavaScript 变量
var myContext=canvas.getContext("2d") //将getContext 应用到 canvas 元素 myContext.fillStyle="#ff0000" //16进制设置填充颜色 myContext.fillRect(30,30,300,300) //定义大小 myContext.fillStyle='rgb(0,255,0)' //rgb设置填充颜色 myContext.fillRect(60,60,300,300)
myContext.fillStyle='rgba(255,0,0,0.5)' //rgb+透明度设置填充颜色 myContext.fillRect(90,90,300,300)</script></body></html>
2、线性渐变,用到createLinearGradient
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>canvas绘制图形</title></head><body><canvas id="myCanvas" width="500" height="500"></canvas><script type="text/javascript">
var myCanvas=document.getElementById("myCanvas") var myContext=myCanvas.getContext('2d') var myGradient=myContext.createLinearGradient(30,30,300,300) //创建一个线性渐变 myGradient.addColorStop(0,"#ff0000") //位置0和1之间,颜色值 myGradient.addColorStop(0.5,"#00FF00")
myGradient.addColorStop(1,"#ff00ff")
myContext.fillStyle=myGradient //用线性渐变填充 myContext.fillRect(0,0,400,400)</script></body></html>
3、放射性渐变,用到createRadialGradient
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>canvas绘制图形</title></head><body><canvas id="myCanvas" width="500" height="500"></canvas><script type="text/javascript">var myCanvas=document.getElementById('myCanvas') var myContext=myCanvas.getContext('2d') var myGradient=myContext.createRadialGradient(300,300,0,300,300,400) //6个参数 myGradient.addColorStop("0","#ff0000")
myGradient.addColorStop("1","#00ff00")
myContext.fillStyle=myGradient
myContext.fillRect(0,0,300,300)</script></body></html>
4、绘制矩形,与填充的不同,这个是描边效果
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>canvas绘制图形</title></head><body><canvas id="myCanvas" width="500" height="500"></canvas><script type="text/javascript">
var myCanvas=document.getElementById("myCanvas") var myContext=myCanvas.getContext('2d')
myContext.strokeStyle="#ff0000" //设置笔触纯色 myContext.strokeRect(0,0,100,100)</script></body></html>
(当宽度为1px时,很明显的出现了模糊的现象,解决方法是数值都加上0.5,具体原因就自己百度下吧)
5、渐变笔触
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>canvas绘制图形</title></head><body><canvas id="myCanvas" width="500" height="500"></canvas><script type="text/javascript">
var myCanvas=document.getElementById("myCanvas") var myContext=myCanvas.getContext('2d') var myGradient=myContext.createLinearGradient(0,0,100,0)
myGradient.addColorStop(0,"#ff0000")
myGradient.addColorStop(1,'#0000ff')
myContext.strokeStyle=myGradient //设置渐变笔触 myContext.lineWidth=5 //描边宽度 myContext.strokeRect(0,0,100,100)</script></body></html>
6、绘制圆,圆周长公式=2∏r
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>canvas绘制图形</title></head><body><canvas id="myCanvas" width="500" height="500"></canvas><script type="text/javascript">
var myCanvas=document.getElementById("myCanvas") var myContext=myCanvas.getContext('2d')
myContext.beginPath() //开始一个新的绘制路径 myContext.arc(100,75,50,0,2*Math.PI) //以坐标点(100,75)为圆心,起始角为0,绘制一个半径为50px的圆形 myContext.stroke() //按照指定的路径绘制弧线</script></body></html>
7、绘制圆形
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>canvas绘制图形</title></head><body><canvas id="myCanvas" width="500" height="500" style="margin:100px 0 0 100px"></canvas><script type="text/javascript">
var myCanvas=document.getElementById("myCanvas") var myContext=myCanvas.getContext('2d')
myContext.arc(100,100,50,0,2*Math.PI)
myContext.fillStyle="#ff0000"
myContext.fill()</script></body></html>
8、绘制直线
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>canvas绘制图形</title></head><body style="padding:500px"><canvas id="myCanvas" width="500" height="500" ></canvas><script type="text/javascript">
var myCanvas=document.getElementById("myCanvas") var myContext=myCanvas.getContext('2d')
myContext.lineWidth=5
myContext.moveTo(0,0) //从坐标(0,0)到(200,0) myContext.lineTo(200,0)
myContext.stroke() //绘制已定义的路径</script></body></html>
9、绘制曲线
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>canvas绘制图形</title></head><body style="padding:500px"><canvas id="myCanvas" width="500" height="500" ></canvas><script type="text/javascript">
var myCanvas=document.getElementById("myCanvas") var myContext=myCanvas.getContext('2d')
myContext.moveTo(20,20)
myContext.quadraticCurveTo(20,100,200,20)
myContext.stroke()</script></body></html>
您好,希望以下回答能帮助您对!html5 的动画效果 是用(js)jQuery+css3做的!html5绘图是用HTML5 Canvas 画图标签 加上API做的!
如您还有疑问可继续追问。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)