初学HTML5 |
您所在的位置：网站首页 › figure函数的功能是创建一个画布 › 初学HTML5 |
初学HTML5
|
一.canvas介绍
canvas为画布， 使用canvas便可以轻松的在网页上绘制图形，文字，图片等。 二.画布的使用 1.创建画布：HTML5中提供了标签，使用标签可以在网页中创建一个矩形区域的画布： 你的浏览器不支持canvas/*当浏览器不支持时显示*/画布本身不具有绘制功能，可以通过JavaScript脚本语言操作绘制图形的API进行绘制操作。 var canvas=document.getElementById('cavsElem'); 2.准备画笔： var context=canvas.getContext('2d'); 3.坐标和起点：设置上下文开始的绘制点，也就是“从哪里开始画”。 context。moveTo(x,y); 4.绘制线条：lineTo()方法用于定义从“x,y”的位置绘制一条直线到起点或上一线头点。 context.lineTo(x,y); 5.路径：绘制直线确定了起始点和线头点后，便形成了一条绘制路径，如果复杂路径绘制，必须使用路径开始和结束。 context.beginPath();//开始路径 context.closePath();//结束路径 6.描边和填充在canvas图形绘制中，路径只是草稿，真正绘制线必须执行stroke（）方法根据路径进行描边，还可以使用fill()方法进行图形的填充。 context.stroke();//描边 context.fill();//填充 7.canvas绘制图形——基本步骤 创建画布：准备画笔（获取上下文对象）：canvas.getContext(“2d”);开始路径规划：context.beginPath();移动起始点：context、moveTo(x,y);绘制线（矩形，圆形，图片…）:context.lineTo(x,y)闭合路径：context.closePath();绘制描边：context.stroke(); 三.绘制简单图形： 1.三角形： 示例如下： Canvas绘制三角形 你的浏览器不支持canvas，请升级浏览器 //===============基本绘制API==================== //获得画布 var canvas = document.getElementById('cavsElem'); var context = canvas.getContext('2d'); //获得上下文 //设置标签的属性宽高和边框 canvas.width = 200; canvas.height = 200; canvas.style.border="1px solid #000"; //绘制三角形 context.beginPath(); //开始路径 context.moveTo(50,50); //三角形，左顶点 context.lineTo(150, 50); //右顶点 context.lineTo(150, 150); //底部的点 context.closePath(); //结束路径 context.stroke(); //描边路径 //context.fill();//填充 效果如下：
canvas中分别使用strokeRect()和fillRect()方法来绘制矩形边框和填充矩形边框和填充矩形 context.strokeRect(x,y,width,heigth);//描边 context.fillRect(x,y,width,height);//填充在canvas中还有一个相当于橡皮擦的方法，使用它可以清除矩形内绘制的内容。 context.clearRect(x,y,width,height); 示例如下： 绘制矩形 你的浏览器不支持canvas，请升级浏览器 //===============绘制矩形==================== //获得画布 var canvas = document.getElementById('cavsElem'); var context = canvas.getContext('2d'); //获得上下文 //设置标签的属性宽高和边框 canvas.width = 300; canvas.height = 300; canvas.style.border="1px solid #000"; //绘制矩形 context.strokeRect(0,0,100,40); context.fillRect(40,40,100,40); context.strokeRect(80,80,100,40); context.fillRect(120,120,100,40); context.clearRect(100,100,100,40); 效果如下：
canvas中使用arc()方法来绘制弧形和圆形 context.arc(x,y,radius,startAngle,endAngle,bAntiClockwise);属性解释： x,y:中心点radius：半径长度startAngle:开始弧度endAngle:结束弧度bAntiClockwise:是否逆时针 示例如下： 绘制圆形和弧形 你的浏览器不支持canvas，请升级浏览器 /* 绘制圆形*/ //获得画布并上下文对象 var context = document.getElementById('cavsElem').getContext('2d'); context.beginPath();//开始路径 context.arc(100,100,100,0,2*Math.PI,true);//绘制圆形，true为逆时针 context.closePath();//关闭路径 context.fillStyle = 'green';//设置填充颜色 context.fill();//填充 /* 绘制弧形*/ context.beginPath();//开始路径 context.strokeStyle = "#fff";//设置描边颜色 context.lineWidth = 5;//设置线的粗细 context.arc(100,150,25,Math.PI/6,5*Math.PI/6,false);//绘制弧形，false为顺时针 context.stroke();//描边 效果如下：
canvas中的绘制图片其实就是把一幅图放在画布中 //绘制原图 context.drawImage(image,dx,dy) //缩放绘图 context.drawImage(image,dx,dy,dWidth,dHeight) //切片绘图 context.drawImage(image,sx,sy,sWidth,sHeigh,dx,dy,dWidth,dHeight) 5.canvas其他方法： clip()方法用于从原始画布剪切任意形状和尺寸的区域save()方法用来保存画布的绘制状态restore()方法用于移除自上一次调用save()方法所添加的任何效果 示例如下： clip()剪切任意形状和尺寸区域 你的浏览器不支持canvas，请升级浏览器 //获得画布 var canvas=document.getElementById('cavsElem'); //设置画布边框 canvas.style.border="1px solid #000"; //获取上下文 var context = canvas.getContext('2d'); // 剪切矩形区域 context.rect(50,20,200,120);//(x,y,width,height) context.stroke();//描边 context.clip(); // 在 clip()之后绘制圆形,只有被剪切区域的内圆形可见 context.arc(200,100,70,0,2*Math.PI,true);//(x,y,半径,开始弧度，结束弧度，true代表逆时针绘制圆形) context.fillStyle="pink"; context.fill();//填充 效果如下：
|
【本文地址】
今日新闻 |
推荐新闻 |