HTML5---Canvas-画线,空心图,矩形,文字,三角形,旋转图片
来源:互联网 发布:淘宝上买衣服可靠吗 编辑:程序博客网 时间:2024/06/01 08:33
</pre><pre name="code" class="html"><!doctype html><html><head></head><body><canvas width="800" height="800" style="background:#888" id="canvas">您的浏览器当前版本不支持canvas标签</canvas><script>//获取画布DOM 还不可以操作var canvas=document.getElementById('canvas');//设置绘图环境var cxt=canvas.getContext('2d');//画一条线段。cxt.beginPath();//开启新路径cxt.lineWidth=10;//设定画笔的宽度cxt.strokeStyle="red"; //设置画笔的颜色cxt.moveTo(20,20);//设定笔触的位置cxt.lineTo(100,20);//设置移动的方式cxt.stroke();//画线cxt.closePath();//封闭路径//画一个空心圆形 凡是路径图形必须先开始路径,画完图之后必须结束路径cxt.beginPath();cxt.lineWidth=3;//重新设置画笔cxt.strokeStyle="green";cxt.arc(200,200,50,0,360,false);cxt.stroke();cxt.closePath();//画一个实心圆形cxt.beginPath();cxt.fillStyle="rgb(255,0,0)";//设置填充的颜色cxt.arc(200,100,50,0,360,false);cxt.fill();cxt.stroke();cxt.closePath();//画一个矩形cxt.beginPath();cxt.rect(300,20,100,100);cxt.stroke();cxt.closePath();cxt.strokeRect(300,150,100,100);//其他方法 建议使用此方式//实心矩形cxt.beginPath();cxt.rect(300,270,100,100);cxt.fill();cxt.closePath();cxt.fillRect(300,390,100,100);//设置文字cxt.font="40px 宋体";//css font属性cxt.fillText("canvas",20,300);cxt.lineWidth=1;//将笔触设置为1像素cxt.strokeText("canvas",20,350);//画图 把一幅图片画到画布中 注意webkit内核的浏览器 chrome和猎豹不支持var img =new Image();img.src="xiaomm.jpg";cxt.drawImage(img,20,370,230,306);//画一个三角形cxt.beginPath();cxt.moveTo(300,500);//移动至开始点cxt.lineTo(300,600);cxt.lineTo(400,550);cxt.closePath();//填充或者画路径需要先闭合路径再画cxt.stroke();//实心cxt.beginPath();cxt.moveTo(300,600);//移动至开始点cxt.lineTo(300,700);cxt.lineTo(400,650);cxt.closePath();cxt.fill();//旋转条形//设置旋转环境cxt.save();cxt.translate(10,10);//在异次元空间重置0,0点的位置cxt.rotate(-350*Math.PI/180);//设置旋转角度 参数是弧度 角度 0-360 弧度=角度*Math.PI/180cxt.lineWidth=10;//旋转一个线段cxt.beginPath();cxt.moveTo(0,0);cxt.lineTo(20,100);cxt.stroke();cxt.closePath();//将旋转之后的元素放回原画布cxt.restore();//旋转图片cxt.save();cxt.translate(20,370);cxt.rotate(-50*Math.PI/180);var img = new Image();img.src="ccc.jpg";cxt.drawImage(img,0,0,230,306);cxt.restore();//上面代码会产生一个小圆点,每隔30毫秒就向右下方移动的效果。setInterval函数的一开始,之所以要将画布重新渲染黑色底色,是为了抹去上一步的小圆点先上升后下降/*var posX = 20,posY = 100;setInterval(function() {cxt.fillStyle = "black";cxt.fillRect(0,0,canvas.width, canvas.height);posX += 1;posY += 0.25;cxt.beginPath();cxt.fillStyle = "white";cxt.arc(posX, posY, 10, 0, Math.PI*2, true); cxt.closePath();cxt.fill();}, 30);*/</script></body></html>
0 0
- HTML5---Canvas-画线,空心图,矩形,文字,三角形,旋转图片
- PHP合成图片、生成文字、居中对齐、画线、矩形、三角形、多边形、图片抗锯齿、不失真 高性能源码示例
- html5 使用canvas画线
- html5中的画布canvas----画出简单的矩形、三角形
- HTML5 移动开发 -- Canvas 绘图 9.1 矩形,填充三角形
- 画线,矩形,图片:
- HTML5 Canvas通过JS旋转图片
- 画线、圆、矩形、面、文字
- 基于HTML5 画布功能canvas的绘画板:画线、画圆、画矩形、橡皮、改变线条
- HTML5 Canvas: 绘制矩形
- iOS 画线 绘制直线、矩形、三角形
- iOS 画线 绘制直线、矩形、三角形
- iOS 画线 绘制直线、矩形、三角形
- iOS 画线 绘制直线、矩形、三角形
- javascript html5 画线 写文字
- 【html5每日练习】html5 canvas画线
- canvas绘制矩形、三角形、圆形
- HTML5 Canvas 旋转
- jQuery的deferred对象详解
- Java之美[从菜鸟到高手演变]之Java学习方法
- 第16章 Hibernate事务处理和缓存管理
- Activity的启动模式
- 2.动画相关
- HTML5---Canvas-画线,空心图,矩形,文字,三角形,旋转图片
- Spring + Activiti + Drools整合的请假例子
- POJ 2425 A Chess Game(SG函数的有向图博弈游戏)
- HDU 2516 取石子游戏( FIB博弈 )
- DevExpress v15.1:WPF控件升级(四)
- Eclipse插件开发菜单路径
- 更改linux文件夹的默认颜色
- 移动Web
- MFC_ HWND(获取控件或窗体句柄) [大三TJB_708]