canvas的一些简单绘制方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas的一些简单绘制方法相关的知识，希望对你有一定的参考价值。
绘画矩形、矩形框、圆、圆环、圆圈~
<canvas class="myCanvas" width="500" height="500"></canvas><!--定义宽高只能在行内定义，否则画的图会与你想象的不一样哦，不信可以试试--> <script> var c = document.getElementsByClassName(‘myCanvas‘)[0];//获取节点 var ctx = c.getContext(‘2d‘);//定义节点的canvas，之后就通过getContext进行canvas的绘制 /*矩形*/ ctx.fillStyle = ‘gray‘;//定义填充样式 ctx.strokeStyle = ‘green‘;//定义线性样式 ctx.lineWidth = ‘10‘;//定义线性的线宽，宽是从矩形框向内外两边同时加粗的 ctx.fillRect(100,50,100,100);//定义面性矩形[这四个参数分别是（横坐标，纵坐标，宽，高）]{这是灰色的矩形} ctx.strokeRect(300,50,100,100);//定义线性矩形[这四个参数分别是（横坐标，纵坐标，宽，高）]{这是绿色的矩形框} ctx.rect(100,200,100,100);//定义矩形（包括面性或者线性） ctx.fill();ctx.stroke();//定义到底是线性还是面性，线面性上单独的在上面已经有了，线面性是定义在同个矩形就是灰色矩形加个绿色的边框 /*圆*/ ctx.beginPath();//这里可以理解为另外起笔，如果忽略这个步骤那么下面的样式就会继承上面的，所以最好不要忽略 ctx.fillStyle = ‘blue‘;//定义填充样式 ctx.lineWidth = ‘10‘;//定义线性的线宽，宽是从圆圈向内外两边同时加粗的 ctx.arc(150,400,50,0,2*Math.PI);//定义圆[这五个参数分别是（横坐标，纵坐标，半径，起始的点(弧度)，结束的点(弧度)）] ctx.fill();//定义圆为面性即蓝色圆面 ctx.beginPath();//另外起笔 ctx.strokeStyle = ‘red‘;//定义线性的样式 ctx.lineWidth = ‘10‘;//定义线性的线宽，宽是从圆圈向内外两边同时加粗的 ctx.arc(350,400,50,0,2*Math.PI);//定义圆[这五个参数分别是（横坐标，纵坐标，半径，起始的点(弧度)，结束的点(弧度)）] ctx.stroke();//定义圆为线性即红色圆圈或者圆环 ctx.beginPath();//另外起笔 ctx.fillStyle = ‘blue‘;//定义填充样式 ctx.strokeStyle = ‘red‘;//定义线性的样式 ctx.lineWidth = ‘10‘;//定义线性的线宽，宽是从圆圈向内外两边同时加粗的 ctx.arc(350,250,50,0,2*Math.PI);//定义圆[这五个参数分别是（横坐标，纵坐标，半径，起始的点(弧度)，结束的点(弧度)）] ctx.stroke();ctx.fill();//同一坐标，同一半径组成了一个同心圆 </script>
写字并且放置字体的位置
以下代码所展现的样式是文字在顶部居中：
<canvas id="myCanvas" width="500px" height="500px"></canvas><!--定义宽高只能在行内定义，否则画的图会与你想象的不一样哦，不信可以试试-->
<script> var c = document.getElementById(‘myCanvas‘);//获取节点 var ctx = c.getContext(‘2d‘);//定义节点的canvas，之后就通过getContext进行canvas的绘制 ctx.beginPath(); /*水平居中*/ // ctx.textAlign = ‘start‘;//这是以横坐标为250(因为下面横坐标为250)为基线来使参考线在文字的右边 ctx.textAlign = ‘center‘;//这是以横坐标为参考线为参考线来使参考线在文字的正中间 // ctx.textAlign = ‘end‘;//这是以横坐标为参考线为参考线来使参考线在文字的右边 /*垂直居中*/ // ctx.textBaseline = ‘top‘;//这是以纵坐标为参考线使参考线在文字的上面 ctx.textBaseline = ‘middle‘;//这是以纵坐标为参考线使参考线在文字的正中间 // ctx.textBaseline = ‘bottom‘;//这是以纵坐标为参考线使参考线在文字的下面 ctx.fillStyle = ‘rgb(182,194,154)‘;//定义填充样式这三个参数为r:红,g:绿,b:蓝，即（红，绿，蓝） ctx.strokeStyle = ‘rgb(220,87,18)‘;//定义线性样式 ctx.font = ‘italic bolder 20px arial‘;//定义文本字体这四个参数分别为（斜体，加粗，字体大小(必须带单位)，微软雅黑） ctx.fillText(‘Hello world!‘,250,20);//这是填充性文本,因为20是字体的大小，所以设置20是是标准的在顶部，三个参数分别为（内容，横坐标，纵坐标）[字体的左下角为（0,0）] // ctx.strokeText(‘你好世界！‘,0,250);//这是填充性文本三个参数分别为（内容，横坐标，纵坐标）[字体的左下角为（0,0）] // ctx.beginPath();//提笔另起 ctx.strokeStyle = ‘red‘;//定义线性样式 ctx.moveTo(250,0);/*定义起始位置*/ctx.lineTo(250,500);//定义结束位置--"Hello world!"的横向参考线 ctx.moveTo(0,20);/*定义起始位置*/ctx.lineTo(500,20);//定义结束位置--"Hello world!"的纵向参考线 ctx.stroke();//选择线性方式 </script>
以下代码则文本在文本框的中心位置：
<canvas id="myCanvas" width="500px" height="500px"></canvas><!--定义宽高只能在行内定义，否则画的图会与你想象的不一样哦，不信可以试试-->
<script> var c = document.getElementById(‘myCanvas‘);//获取节点 var ctx = c.getContext(‘2d‘);//定义节点的canvas，之后就通过getContext进行canvas的绘制 ctx.beginPath(); /*水平居中*/ // ctx.textAlign = ‘start‘;//这是以横坐标为250(因为下面横坐标为250)为基线来使参考线在文字的右边 ctx.textAlign = ‘center‘;//这是以横坐标为参考线为参考线来使参考线在文字的正中间 // ctx.textAlign = ‘end‘;//这是以横坐标为参考线为参考线来使参考线在文字的右边 /*垂直居中*/ // ctx.textBaseline = ‘top‘;//这是以纵坐标为参考线使参考线在文字的上面 ctx.textBaseline = ‘middle‘;//这是以纵坐标为参考线使参考线在文字的正中间 ctx.fillStyle = ‘rgb(182,194,154)‘;//定义填充样式这三个参数为r:红,g:绿,b:蓝，即（红，绿，蓝） ctx.strokeStyle = ‘rgb(220,87,18)‘;//定义线性样式 ctx.font = ‘italic bolder 20px arial‘;//定义文本字体这四个参数分别为（斜体，加粗，字体大小(必须带单位)，微软雅黑） ctx.beginPath();//提笔另起 ctx.strokeStyle = ‘red‘;//定义线性样式 ctx.moveTo(250,0);/*定义起始位置*/ctx.lineTo(250,500);//定义结束位置--"Hello world!"的横向参考线 ctx.stroke();//选择线性方式 // ctx.beginPath();//提笔另起 ctx.strokeStyle = ‘black‘;//定义线性样式 ctx.textAlign = ‘center‘; ctx.textBaseline = ‘middle‘; ctx.moveTo(0,250);/*定义起始位置*/ctx.lineTo(500,250);//定义结束位置--"你好世界"的横向参考线 ctx.stroke();//选择线性方式 ctx.strokeText(‘你好世界！‘,250,250);//黑空星的你好世界在文本框的的正中新 </script>
用线段来画一个大箭头
<canvas id="myCanvas2" width="400px" height="400px"></canvas> <script> var myCanvas2 = document.getElementById(‘myCanvas2‘);//获取节点 var ctx2 = myCanvas2.getContext(‘2d‘);//平面编辑 ctx2.beginPath();//开始 ctx2.strokeStyle = ‘#000‘;//线性样式为黑色 ctx2.lineJoin = ‘round‘;//圆角 这是每个接点显得比较圆润的效果 // ctx2.lineJoin = ‘miter‘;//默认 这是默认的效果，显得比较尖 // ctx2.lineJoin = ‘bevel‘;//切角 这是切角的效果，显得比较钝 ctx2.lineWidth = ‘10‘;//线宽为10px var x=50,y=50;//申明变量，方便下面画的图平移的效果 ctx2.moveTo(0+x,150+y);//起点 ctx2.lineTo(150+x,0+y);//接点 ctx2.lineTo(300+x,150+y);//接点 ctx2.lineTo(225+x,150+y);//接点 ctx2.lineTo(225+x,300+y);//接点 ctx2.lineTo(75+x,300+y);//接点 ctx2.lineTo(75+x,150+y);//接点 ctx2.closePath();//封闭接口 ctx2.stroke();//线性绘画 </script>
运用图片
<canvas width="300px" height="300px" id="myCanvas"> <img src="sight.jpg" alt="" id="canvasImg"/><!--这里添加图片是添加不上的--> </canvas> <script> var c = document.getElementById(‘myCanvas‘);//获取canvas的节点 var ctx = c.getContext(‘2d‘);//平面绘画 var canvasImg = document.getElementById(‘canvasImg‘);//获取img的节点 var img = new Image();//获取图片的方法 img.src = ‘sight.jpg‘;//图片的路径 canvasImg.onload = function(){//页面加载完成时 ctx.drawImage(canvasImg,0,0,300,300);//添加图片[图片，横坐标，纵坐标，宽带，高度] }
</script>
制作动态下雨效果
<canvas class="myCanvas" height="500px" width="500px"style="background: #ECF3F8;display: block;margin: auto;"></canvas> <script> window.onload = function(){//页面加载完成时执行 var c = document.getElementsByClassName(‘myCanvas‘)[0];//获取节点 var ctx = c.getContext(‘2d‘);//平面绘画 ctx.fillStyle = (‘rgba(36,196,191,0.8)‘);//填充样式的rgba即颜色[红，绿，蓝，alpha(透明度0-1之间的数)] function myX() {//声明横坐标即雨点的位置函数 window.requestAnimationFrame(myX);//使频率和电脑一样，这里也可以用setInterval var x = 0, y = 0,h = 0;//声明变量 x = Math.floor(Math.random() * 500);//横坐标获取随机数数 h = Math.floor(Math.random()*30+10);//雨点的长度获取随机数 function myY() {//申明纵坐标即雨下的函数 ctx.beginPath();//开始 y += 8;//纵坐标自加8 ctx.fillRect(x, y, 2, h);//雨点的位置即长度[下雨的位置，向下落的动态，雨的宽度] window.requestAnimationFrame(myY);//使频率和电脑一样防止雨滴出现闪烁的原因，这里一定不能用setInterval } myY();//调用函数，与window.requestAnimationFrame(myY);形成递归 ctx.clearRect(0, 0, 500, 500);//清除雨滴 } myX();//调用函数，与window.requestAnimationFrame(myX);形成递归 } </script>
制作画板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>painting</title> </head> <body> <canvas class="myCanvas" width="500px" height="500px" style="display: block;margin: auto;background: #ECF3F8;cursor: pointer"></canvas> <input type="color" id="color"/> <input type="range" id="range" min="1" max="100" value="5"/> <span id="show"></span> </body> <script> window.onload = function(){ var c = document.getElementsByClassName(‘myCanvas‘)[0];//获取节点 var ctx = c.getContext(‘2d‘);//这里面只能是2d表示在二维的画布里写的意思 var range = document.getElementById(‘range‘);//获取节点 var show = document.getElementById(‘show‘);//获取节点 function change(){//这是改变画笔粗细的函数 show.innerText= range.value;//span标签里的值即为range标签里选择的大小 requestAnimationFrame(change);//span标签里的数字随着range的改变而改变，这是递归 }change();//调用 var moveNum = false;//声明变量 c.onmousedown = function (e) {//鼠标按下事件 var e = e || event;//解决兼容问题 var x = e.clientX - c.offsetLeft;//找到鼠标的横坐标 var y = e.clientY - c.offsetTop;//鼠标的纵坐标 ctx.beginPath();//起笔 ctx.lineWidth = range.value;//线条的粗细 var color = document.getElementById(‘color‘);//获取节点 var val = color.value;//获取节点的值 ctx.strokeStyle = val;//将颜色的值赋给线条样式 ctx.moveTo(x,y);//画笔的起点位置 moveNum = true;//令moveNum等于true， }; c.onmousemove = function(){//鼠标移动事件 var e = e || event;//兼容问题 var x = e.clientX - c.offsetLeft; var y = e.clientY - c.offsetTop; if(moveNum){//如果move为true即为有值的情况下也就是说必须鼠标按下过后才能执行操作 ctx.lineTo(x,y);//终点，也就是鼠标弹起的情况就停止了绘画 ctx.stroke();//采用线性的方式绘画 } }; document.onmouseup = function(){//鼠标弹起事件 return moveNum = false;//返回moveNum为false即为无值得情况，则什么也不做即结束绘画 }; } </script> </html>
制作水波效果
<canvas class="myCanvas" height="500px" width="500px"style="background: #ECF3F8;display: block;margin: auto;"></canvas> <script> window.onload = function(){//页面加载完成后执行 var c = document.getElementsByClassName(‘myCanvas‘)[0];//获取节点 var ctx = c.getContext(‘2d‘);//平面绘画 c.addEventListener(‘click‘,function(e){//点击事件 var e = e || event;//浏览器兼容问题 var x = e.clientX - c.offsetLeft;//获取鼠标横坐标 var y = e.clientY - c.offsetTop;//获取鼠标纵坐标 var addR = 0;//声明变量让半径从0开始 var alpha = 1;//申明变量设置透明度 function recursion(){//申明函数 ctx.fillStyle = ‘rgba(36,196,191,‘+alpha+‘)‘;//填充样式 addR += 1;//半径每次自加1 alpha -=0.01;//透明度每次自减0.01 ctx.beginPath();//开始 ctx.arc(x,y,addR,0,2*Math.PI);//画圆（水波）[鼠标点击的横坐标，鼠标点击的纵坐标，圆的起始位置，圆的结束位置] ctx.fill();//填充类型 /*if(alpha <= 0){ ctx.clearRect(0,0,500,500);//如果这里打开的话那么你第一个点击的水波（圆）颜色不会渐变 }*/ if(alpha >= 0){ window.requestAnimationFrame(recursion);//和电脑使用相同的频率，防止水波最大时闪动消失 } } recursion();//调用函数，与window.requestAnimationFrame(recursion);形成递归 }); function clear(){//声明清除水波的函数 ctx.clearRect(0,0,500,500);//清除水波 window.requestAnimationFrame(clear);//和电脑使用相同的频率，防止水波最大时闪动消失，这里可以解决第一个点击的水波（圆）颜色不会渐变的问题 } clear();//调用函数，与window.requestAnimationFrame(clear);形成递归 } </script>
以上是关于canvas的一些简单绘制方法的主要内容，如果未能解决你的问题，请参考以下文章