canvas简单的介绍
Posted 乐多呀
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas简单的介绍相关的知识,希望对你有一定的参考价值。
<canvas></canvas> 标签定义图形,比如图表和其他图像;它只是图形容器,您必须使用脚本来绘制图形。
所以使用canvas,主要是写很多javascript来实现它的功能.
使用canvas,首先要定义canvas画布在body里面的范围:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas介绍</title> 6 </head> 7 <body> 8 9 <canvas width="600" height="800" style="background: yellow" id="canvas"> 10 您的浏览器版本不支持canvas标签 11 </canvas> 12 </body> 13 </html>
在这里width是画布的宽,height是画布的高,style是画布的样式,id即是canvas的表示,方便javaScript获取DOM对象.
在这里主要讲一下基本的图形画法:
<script> //获取画布的DOM, canvas还不可以操作 var canvas = document.getElementById(‘canvas‘); //设置绘图环境,2d是一个标准 var cxt = canvas.getContext(‘2d‘); //画一条线段 //设定画笔的宽度 cxt.lineWidth = 10; //画笔的颜色 cxt.strokeStyle = "#ff9900"; //有一个开始的位置,需要一个坐标,(20,20)表示左上角往有数20,往下数20 cxt.moveTo(20,20); //设置划线的方式,需要一个坐标,横线是x改变,y不变,竖线是x不变,y改变 cxt.lineTo(100,20); cxt.stroke(); //封闭路径 cxt.closePath(); //画一个圆型,凡是路径图形必须先开始路径,画完之后必须结束路径 // 第一个和第二个参数是圆心的坐标点, // 第三个参数是半径, // 第四个和第五个参数是表示范围,如果是半圆就是0到180,整圆就是0到360 // 最后一个是表示是顺时针还是逆时针,false表示逆时针,true表示顺时针 cxt.beginPath(); cxt.lineWidth = 3; cxt.strokeStyle = ‘red‘; cxt.arc(200,200,50,0,360,false); cxt.stroke(); cxt.closePath(); //画一个实心圆 cxt.beginPath(); cxt.fillStyle = ‘blue‘; cxt.arc(200,80,50,0.360,false); cxt.fill(); cxt.stroke(); cxt.closePath(); //画一个矩形(不需要开始和结束路径) cxt.rect(300,20,100,100); cxt.stroke(); //其他方法 cxt.strokeRect(300,150,100,100); //实心矩形 cxt.beginPath(); cxt.rect(300,380,100,100); cxt.fill(); cxt.closePath(); //其他方法 cxt.fillRect(420,380,100,100); //设置文字 cxt.font = "40px 黑体"; cxt.fillText("这是一个字符串",20,300); cxt.lineWidth = 1; //在这里设置空心字
cxt.strokeText("这是一个字符串",20,350); //画图,把一幅图片画到画布 var img= new Image(); img.src = ""; cxt.drawImage(img,20,370,230,306); //画一个三角形,可以根据自己的需要设置坐标,画三角形的话必须要先关闭路径,再画图 cxt.beginPath(); cxt.moveTo(350,500); cxt.lineTo(320,600); cxt.lineTo(500,600); cxt.closePath(); cxt.stroke(); </script>
以上是关于canvas简单的介绍的主要内容,如果未能解决你的问题,请参考以下文章