国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > HTML5-Canvas

HTML5-Canvas

来源:程序员人生   发布时间:2014-05-26 18:03:11 阅读次数:3002次

<canvas>是html5当中的一个标签,通过Javascript来画图。

<canvas id=”canvas” width=”150″ height=”150″></canvas>

<script>

var canvas = document.getElementById(”canvas”);

var ctx = canvas.getContext(”2d”);

ctx.fillStyle = “rgb(0,0,200)”;

ctx.fillRect(10, 10, 50, 50);

</script>

画图形


这是canvas的网格,刚才的图形,x=10,y=10, width=150, height=150

不像svg, canvas仅支持一种图形-矩形,所有其它复杂的图形都是通过一些函数来组成的。

画矩形

fillRect(x,y,width,height) : 画一个填充的矩形
strokeRect(x,y,width,height) : 为一个矩形描边
clearRect(x,y,width,height) : 清楚一个矩形的一部分并且设为透明

rect(x, y, width, height)
直接画矩形,当调用rect方法时moveTo会直接定位到(0,0)位置

画路径

beginPath() 创建路径的第一步是调用beginPath方法,返回一个存储路径的信息
closePath() 从当前的点到起始点闭合路径
stroke()描边路径
fill()填充路径
lineTo(x, y) 从上一个起点到(x,y)的点画线,上一个起点可以通过moveTo来指定,默认为原先路径的终点

ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();

 

画弧线

arc(x, y, radius, startAngle, endAngle, anticlockwise)
(x,y)是圆弧的圆心,radius-半径, startAngle和endAngle是圆弧的开始和结束弧度(radians = (Math.PI/180)*degree),anticlockwise为true的话是逆时针,否则为顺时针

二次方曲线以及贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
(cp1x, cp1y),(cp2x,cp2y)是曲线的控制点(红点),(x,y)是曲线的终点

使用图像

drawImage(image, x, y)image-图像对象

function draw() {
var ctx = document.getElementById(’canvas’).getContext(’2d’);
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
img.src = ‘images/backdrop.png’;
}

drawImage(image, x, y, width, height)width和height是目标canvas上图像的宽高
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)


image参数与前面一样,后面的四个参数是截取的参数,再后面的四个参数是目标canvas图像的位置以及宽高

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生