canvas画布
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas画布相关的知识，希望对你有一定的参考价值。
canvas标签：
<style type="text/css"> #cvs{ background:pink; /* 如果通过css定义宽高那么就是普通的给出一个显示的宽高，而不会给出一个绘画的宽高 */ /* canvas是h5新增的标签，使用者可以在canvas上绘制图形； canvas是一对双标签，标签内部的内容当用户浏览器不支持canvas标签时显示； canvas只是在压面显示一个有背景色的画布，要进行绘制图形需要用到canvasAPI以及jsp canvas只有两个属性width height */ } </style> </head> <body> <canvas width="300px" height="300px" id="cvs" > 你的浏览器不支持canvas标签 </canvas>
在canvas上画线条
/*
1、getContext("2d")设置绘图环境
获取对象指出访问绘图功能必要API
2、lineWidth笔触宽度
3、strokeStyle笔触样式
4、moveTo()把路径移动到画布中的点，不创建线条
5、lineTo()添加一个新点，创建该点到最后定义点的线条
6、stroke()绘制已定义路径
*/
var canvas = document.getElementById("cvs");
var cxt = canvas.getContext("2d");//获得一个绘画的对象集
cxt.lineWidth=10;//设置要画的线的宽度
cxt.strokeStyle="rgb(0,255,0)";//设置样式
cxt.moveTo(20,20);
cxt.lineTo(123,30);
cxt.stroke();//将绘制的东西显示出来
绘制封闭路径：
var canvas = document.getElementById("cvs");
var cxt = canvas.getContext("2d");//获得一个绘画的对象集
cxt.beginPath();
cxt.lineWidth=5;//设置要画的线的宽度
cxt.strokeStyle="rgb(0,255,0)";//设置样式
cxt.moveTo(20,20);
cxt.lineTo(80,20);
cxt.stroke();//将绘制的东西显示出来
cxt.closePath();
cxt.beginPath();
cxt.strokeStyle="yellow";
cxt.lineWidth=8;
cxt.moveTo(40,40);
cxt.lineTo(100,40);
cxt.stroke();
cxt.closePath();
绘制圆形
/* 1、语法arc(x,y,r,起始点，终止点，方向) 2、起始点终止点一半用弧度表示 弧度=角度*Math*PI/180 */ var canvas = document.getElementById("cvs"); var cxt = canvas.getContext("2d");//获得一个绘画的对象集 cxt.beginPath(); cxt.arc(100,100,100,0,2*Math.PI,false);//第一二个参数是说明圆心点在哪，三参数是半径，第四五参数是指开始的角度和结束的角度，最后一个参数是说顺时针画还是逆时针画 cxt.closePath(); cxt.stroke(); cxt.beginPath(); cxt.arc(200,200,100,0,2*Math.PI,true);//第一二个参数是说明圆心点在哪，三参数是半径，第四五参数是指开始的角度和结束的角度，最后一个参数是说顺时针画还是逆时针画 cxt.closePath(); cxt.stroke();
以上是关于canvas画布的主要内容，如果未能解决你的问题，请参考以下文章