HTML5 小实例
1、时钟:
- <!doctype html>
- <html>
- <head></head>
- <body>
- <canvas id="clock" width="500" height="500">
- 您的浏览器不支持canvas标签,无法看到时钟
- </canvas>
- <script>
- var clock=document.getElementById('clock');
- var cxt=clock.getContext('2d');
- /*
- 1、获取画布
- 2、画图时首先需要设置画笔颜色,画笔画出的宽度。
- 3、开始路径。
- 4、画笔操作,比如画直线,矩形等。
- 5、关闭路径。
- 6、图像已经出来了,那么可以进行填充等。例如给圆填充颜色。
- 7、显示前面画出的结果。
- */
- function drawClock(){
- //清除画布
- cxt.clearRect(0,0,500,500);
- var now =new Date();
- var sec=now.getSeconds();
- var min=now.getMinutes();
- var hour=now.getHours();
- //小时必须获取浮点类型(小时+分数转化成的小时)
- hour=hour+min/60;
- //问题 19:23:30
- //将24小时进制转换为12小时
- hour=hour>12?hour-12:hour;
- //表盘(蓝色)
- cxt.lineWidth=10;
- cxt.strokeStyle="blue";
- cxt.beginPath();
- cxt.arc(250,250,200,0,360,false);
- cxt.closePath();
- cxt.fillStyle="#abcdef";
- cxt.fill();
- cxt.stroke();
- //刻度
- //时刻度
- for(var i=0;i<12;i++){
- cxt.save();
- //设置时针的粗细
- cxt.lineWidth=7;
- //设置时针的颜色
- cxt.strokeStyle="#000";
- //先设置0,0点
- cxt.translate(250,250);
- //再设置旋转角度
- cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度
- cxt.beginPath();
- cxt.moveTo(0,-170);
- cxt.lineTo(0,-190);
- cxt.closePath();
- cxt.font="12px 宋体";//css font属性
- cxt.fillText(i+"",0,-170);
- cxt.stroke();
- cxt.restore();
- }
- //分刻度
- for(var i=0;i<60;i++){
- cxt.save();
- //设置分刻度的粗细
- cxt.lineWidth=5;
- //设置颜色(使用时刻度的颜色)
- cxt.strokeStyle="#000";
- //设置或者重置画布的0,0点
- cxt.translate(250,250);
- //设置旋转角度
- cxt.rotate(i*6*Math.PI/180);
- //画分针刻度
- cxt.beginPath();
- cxt.moveTo(0,-180);
- cxt.lineTo(0,-190);
- cxt.closePath();
- cxt.stroke();
- cxt.restore();
- }
- //时针
- cxt.save();
- //设置时针风格
- cxt.lineWidth=7;
- //设置时针的颜色
- cxt.strokeStyle="#000";
- //设置异次元空间的0,0点
- cxt.translate(250,250);
- //设置旋转角度
- cxt.rotate(hour*30*Math.PI/180);
- cxt.beginPath();
- cxt.moveTo(0,-140);
- cxt.lineTo(0,10);
- cxt.closePath();
- cxt.stroke();
- cxt.restore();
- //分针
- cxt.save();
- //设置分针的风格
- cxt.lineWidth=5;
- cxt.strokeStyle="#000";
- //设置异次元空间分针画布的圆心
- cxt.translate(250,250);
- //设置旋转角度
- cxt.rotate(min*6*Math.PI/180);
- cxt.beginPath();
- cxt.moveTo(0,-160);
- cxt.lineTo(0,15);
- cxt.closePath();
- cxt.stroke();
- cxt.restore();
- //秒针
- cxt.save();
- //设置秒针的风格
- //颜色红色
- cxt.strokeStyle="red";
- //粗细 3像素
- cxt.lineWidth=3;
- //重置0,0点
- cxt.translate(250,250);
- //设置旋转角度
- cxt.rotate(sec*6*Math.PI/180);
- //画图
- cxt.beginPath();
- cxt.moveTo(0,-170);
- cxt.lineTo(0,20);
- cxt.closePath();
- cxt.stroke();
- //画出时针、分针、秒针的交叉点、
- cxt.beginPath();
- cxt.arc(0,0,5,0,360,false);
- cxt.closePath();
- //设置填充样式
- cxt.fillStyle="gray";
- cxt.fill();
- //设置笔触样式(秒针已设置)
- cxt.stroke();
- //设置秒针前段的小圆点
- cxt.beginPath();
- cxt.arc(0,-150,5,0,360,false);
- cxt.closePath();
- //设置填充样式
- cxt.fillStyle="gray";
- cxt.fill();
- //设置笔触样式(秒针已设置)
- cxt.stroke();
- cxt.restore();
- }
- //使用setInterval(代码,毫秒时间) 让时钟动起来
- drawClock();
- setInterval(drawClock,1000);
- </script>
- </body>
- </html>
2、太阳系
- <!doctype html>
- <html>
- <head></head>
- <body>
- <canvas id="canvas" width="1000" height="1000" style="background:#000">
- 您的浏览器不支持canvas标签
- </canvas>
- <script>
- //设置2d绘图环境
- var cxt=document.getElementById('canvas').getContext('2d');
- //轨道
- function drawTrack(){
- for(var i=0;i<8;i++){
- cxt.beginPath();
- cxt.arc(500,500,(i+1)*50,0,360,false);
- cxt.closePath();
- //设置笔触的颜色
- cxt.strokeStyle="#fff";
- cxt.stroke();
- }
- }
- drawTrack();
- //星球
- function Star(x,y,radius,cycle,sColor,eColor){
- //画出星球需要哪些属性
- //星球的坐标点
- this.x=x;
- this.y=y;
- //星球的半径
- this.radius=radius;
- //公转周期
- this.cycle=cycle;
- //星球的颜色(开始色,结束色)
- this.sColor=sColor;
- this.eColor=eColor;
- //新建一个渐变颜色空对象
- this.color=null;
- //设置一个计时器
- this.time=0;
- this.draw=function(){
- //保存之前的画布内容
- cxt.save();
- //重置0,0坐标点
- cxt.translate(500,500);
- //设置旋转角度
- cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
- //画星球
- cxt.beginPath();
- cxt.arc(this.x,this.y,this.radius,0,360,false);
- cxt.closePath();
- //设置星球的填充颜色
- //新建渐变对象
- this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
- //设置渐变效果
- this.color.addColorStop(0,this.sColor);//渐变开始点和颜色
- this.color.addColorStop(1,this.eColor);//渐变结束点和颜色
- cxt.fillStyle=this.color;//将渐变对象复制给填充画笔
- //填充星球
- cxt.fill();
- //恢复之前保存的画布内容
- cxt.restore();
- //执行完毕之后时间增加
- this.time+=1;
- }
- }
- //创建一个太阳对象的构造函数
- function Sun(){
- Star.call(this,0,0,20,0,"#F00","#f90");
- }
- //创建一个水星的对象构造方法
- function Mercury(){
- Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40");
- }
- //创建一个金星的对象构造方法
- function Venus(){
- Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315");
- }
- //创建一个地球的对象构造方法
- function Earth(){
- Star.call(this,0,-150,10,365.224,"#78B1E8","#050C12");
- }
- //创建一个火星的对象构造方法
- function Mars(){
- Star.call(this,0,-200,10,686.98,"#CEC9B6","#76422D");
- }
- //创建一个木星的对象构造方法
- function Jupiter(){
- Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222");
- }
- //创建一个土星的对象构造方法
- function Saturn(){
- Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533");
- }
- //创建一个天王星的对象构造方法
- function Uranus(){
- Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A");
- }
- //创建一个天王星的对象构造方法
- function Neptune(){
- Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73");
- }
- //创建太阳对象实例
- var sun=new Sun();
- //创建水星对象实例
- var water=new Mercury();
- //创建金星对象实例
- var gold=new Venus();
- //创建一个地球对象实例
- var diqiu=new Earth();
- //创建一个火星对象实例
- var fire=new Mars();
- //创建一个木星对象实例
- var wood=new Jupiter();
- //创建一个土星对象实例
- var soil=new Saturn();
- //创建一个天王星对象实例
- var god=new Uranus();
- //创建一个海王星对象实例
- var sea=new Neptune();
- function move(){
- //清除画布
- cxt.clearRect(0,0,1000,1000);
- //画出轨道
- drawTrack();
- //画出每个星球
- sun.draw();
- water.draw();
- gold.draw();
- diqiu.draw();
- fire.draw();
- wood.draw();
- soil.draw();
- god.draw();
- sea.draw();
- }
- //使个星球进行运动
- setInterval(move,10);
- </script>
- </body>
- </html>
3、简单的画图软件
css3样式:
- /*页面公共属性设置*/
- *{padding:;margin:;list-style:none;}
- body{background:#ABCDEF}
- /*页面顶部属性设置*/
- #header{width:900px;height:80px;font-size:40px;margin:0 auto;text-align:center;line-height:80px}
- /*页面中间部分(画图板)属性*/
- #content{width:880px;height:550px;background:gray;margin:0 auto;padding:10px}
- #tool{height:150px;text-align:center}
- #tool li{float:left;width:175px;height:140px;background:#ccc;border-right:1px solid red}
- #image{text-align:left;padding:20px}
- #image li{height:30px;width:100px;list-style:square inside;border:}
- #image li button{background:gray;border:1px solid #000}
- #image li button:hover{background:gray;border:1px solid #FFF}
- #means,#shape{padding:20px}
- #means li,#shape li{height:20px;width:40px;border:1px solid #000;margin-bottom:10px}
- #means li:hover,#shape li:hover{height:20px;width:40px;border:1px solid #fff;margin-bottom:10px}
- #means img,#shape img{height:20px;width:20px}
- #size{padding:10px}
- #size li{height:20px;width:120px;border:1px solid #ccc}
- #size li:hover{height:20px;width:120px;border:1px solid #FFF}
- #color{padding:25px}
- #color li{width:20px;height:20px;border:1px solid #000;margin-bottom:10px;margin-right:3px}
- #color li:hover{width:20px;height:20px;border:1px solid #fff;margin-bottom:10px;margin-right:3px}
- #color #red{background:red}
- #color #green{background:green}
- #color #blue{background:blue}
- #color #yellow{background:yellow}
- #color #white{background:white}
- #color #black{background:black}
- #color #pink{background:pink}
- #color #purple{background:purple}
- #color #cyan{background:cyan}
- #color #orange{background:orange}
- #canvas{background:white}
- #canvas:hover{cursor:crosshair
- }
- /*页面底部属性设置*/
- #footer{width:900px;height:30px;margin:0 auto;text-align:center}
js文件:
- var canvas=document.getElementById('canvas');
- var cxt=canvas.getContext('2d');
- //获取工具按钮的标签
- //获取画笔标签
- var Brush=document.getElementById('means_brush');
- //获取橡皮标签
- var Eraser=document.getElementById('means_eraser');
- //获取油漆桶标签
- var Paint=document.getElementById('means_paint');
- //获取吸管标签
- var Straw=document.getElementById('means_straw');
- //获取文本标签
- var Text=document.getElementById('means_text');
- //获取放大镜标签
- var Magnifier=document.getElementById('means_magnifier');
- //获取形状按钮的标签
- //获取画线标签
- var Line=document.getElementById('shape_line');
- //获取画圆圈的标签
- var Arc=document.getElementById('shape_arc');
- //获取画方框的标签
- var Rect=document.getElementById('shape_rect');
- //获取画多标签的标签
- var Poly=document.getElementById('shape_poly');
- //获取画圆形(填充)
- var ArcFill=document.getElementById('shape_arcfill');
- //获取画矩形的标签
- var RectFill=document.getElementById('shape_rectfill');
- //把12个工具和形状标签放到一个数组中
- var actions=[Brush,Eraser,Paint,Straw,Text,Magnifier,Line,Arc,Rect,Poly,ArcFill,RectFill];
- //获取线宽按钮
- var Line_1=document.getElementById('width_1');
- var Line_3=document.getElementById('width_3');
- var Line_5=document.getElementById('width_5');
- var Line_8=document.getElementById('width_8');
- //把4中线宽对象放到一个数组中
- var widths=[Line_1,Line_3,Line_5,Line_8];
- //获取颜色按钮
- var ColorRed=document.getElementById('red');
- var ColorGreen=document.getElementById('green');
- var ColorBlue=document.getElementById('blue');
- var ColorYellow=document.getElementById('yellow');
- var ColorWhite=document.getElementById('white');
- var ColorBlack=document.getElementById('black');
- var ColorPink=document.getElementById('pink');
- var ColorPurPle=document.getElementById('purple');
- var ColorCyan=document.getElementById('cyan');
- var ColorOrange=document.getElementById('orange');
- //把10中颜色标签对象放到一个数组中
- var colors=[ColorRed,ColorGreen,ColorBlue,ColorYellow,ColorWhite,ColorBlack,ColorPink,ColorPurPle,ColorCyan,ColorOrange];
- //设置初始值
- //默认选中画笔工具
- drawBrush(0);
- //默认设置颜色
- setColor(ColorRed,0);
- //设置默认线宽
- setLineWidth(0);
- //状态设置函数
- function setStatus(Arr,num,type){
- for(var i=0;i<Arr.length;i++){
- //设置选中的标签改变CSS属性
- if(i==num){
- //设置改变CSS的样式是背景色还是边框
- if(type==1){
- Arr[i].style.background="yellow";
- }else{
- Arr[i].style.border="1px solid #fff";
- }
- }else{//设置未选中的组中的其他标签改变颜色
- if(type==1){
- Arr[i].style.background="#ccc";
- }else{
- Arr[i].style.border="1px solid #000";
- }
- }
- }
- }
- //设置图像功能函数 保存图片 清空画布
- function saveimg(){
- var imgdata=canvas.toDataURL();
- var b64=imgdata.substring(22);
- //alert(b64);
- //将form表单中的隐藏表单 赋值(值就是我们获取的b64)
- var data=document.getElementById('data');
- data.value=b64;
- //将表单提交到后台//http://localhost/down.php
- var form=document.getElementById('myform');
- form.submit();
- }
- //清空画布
- function clearimg(){
- //画布清除方法
- cxt.clearRect(0,0,880,400);
- }
- //列出所有的按钮对应的函数
- //铅笔工具函数
- function drawBrush(num){
- setStatus(actions,num,1);
- var flag=0;//设置标志位->检测鼠标是否按下
- canvas.onmousedown=function(evt){
- evt=window.event||evt;
- var startX=evt.pageX-this.offsetLeft;
- var startY=evt.pageY-this.offsetTop;
- cxt.beginPath();
- cxt.moveTo(startX,startY);
- flag=1;
- }
- //鼠标移动的时候->不同的绘图(获取鼠标的位置)
- canvas.onmousemove=function(evt){
- evt=window.event||evt;
- var endX=evt.pageX-this.offsetLeft;
- var endY=evt.pageY-this.offsetTop;
- //判断一下鼠标是否按下
- if(flag){
- //移动的时候设置路径并且画出来
- cxt.lineTo(endX,endY);
- cxt.stroke();
- }
- }
- //鼠标抬起的时候结束绘图
- canvas.onmouseup=function(){
- flag=0;
- }
- //鼠标移出canvas的时候必须取消画图操作
- canvas.onmouseout=function(){
- flag=0;
- }
- }
- var eraserFlag=0;//设置橡皮擦的状态标志位
- //橡皮工具函数
- function drawEraser(num){
- setStatus(actions,num,1);
- canvas.onmousedown=function(evt){
- evt=window.event||evt;
- var eraserX=evt.pageX-this.offsetLeft;
- var eraserY=evt.pageY-this.offsetTop;
- //canvas擦出方法 cxt.clearRect();
- cxt.clearRect(eraserX-cxt.lineWidth,eraserY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2);
- eraserFlag=1;
- }
- //随着鼠标移动不停地擦出
- canvas.onmousemove=function(evt){
- evt=window.event||evt;
- var eraserX=evt.pageX-this.offsetLeft;
- var eraserY=evt.pageY-this.offsetTop;
- // 擦除方法
- if(eraserFlag){//判断鼠标左键是否按下(按下的情况下拖动鼠标才能删除)
- cxt.clearRect(eraserX-cxt.lineWidth,eraserY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2);
- }
- }
- //抬起鼠标按键 清除擦出的状态位 变成0
- canvas.onmouseup=function(){
- eraserFlag=0;
- }
- //抬起鼠标移出画布 清除擦出的状态位 变成0
- canvas.onmouseout=function(){
- eraserFlag=0;
- }
- }
- //油漆桶工具函数
- function drawPaint(num){
- setStatus(actions,num,1);
- canvas.onmousedown=function(){
- //把画布涂成指定的颜色->画一个填充颜色的矩形
- cxt.fillRect(0,0,880,400);
- }
- canvas.onmouseup=null;
- canvas.onmousemove=null;
- canvas.onmouseout=null;
- }
- //吸管工具函数
- function drawStraw(num){
- setStatus(actions,num,1);
- canvas.onmousedown=function(evt){
- evt=window.event||evt;
- var strawX=evt.pageX-this.offsetLeft;
- var strawY=evt.pageY-this.offsetTop;
- //获取该点坐标处的颜色信息
- //获取图像信息的方法getImageData(开始点X,开始点Y,宽度,高度)
- var obj=cxt.getImageData(strawX,strawY,1,1);
- //alert(obj.data[3]);//ImageData对象
- //obj.data=[红,绿,蓝色,透明度]//1像素的数据
- //注意:在data数组中,每4个数组元素表示canvas画布中的一个像素点,
- //这4个元素的取值范围都是0-255
- /*obj.data=[
- 红,绿,蓝色,透明度,
- 红,绿,蓝色,透明度,
- 红,绿,蓝色,透明度,
- 红,绿,蓝色,透明度,
- 红,绿,蓝色,透明度,
- 红,绿,蓝色,透明度,
- 红,绿,蓝色,透明度,
- 红,绿,蓝色,透明度,
- ]//多像素的数据
- */
- //红色的RGB(255,0,0)
- //绿色的RGB(0,255,0);
- var color='rgb('+obj.data[0]+','+obj.data[1]+','+obj.data[2]+')';
- //将吸管吸出的颜色设定到我们的应用中
- cxt.strokeStyle=color;
- cxt.fillStyle=color;
- //颜色吸取吸取之后自动选中画笔工具
- drawBrush(0);
- }
- //取消移动事件 、鼠标抬起事件、鼠标移出事件
- canvas.onmousemove=null;
- canvas.onmouseup=null;
- canvas.onmouseout=null;
- }
- //文本工具函数
- function drawText(num){
- setStatus(actions,num,1);
- canvas.onmousedown=function(evt){
- evt=window.event||evt;
- //获取鼠标点击时的位置
- var textX=evt.pageX-this.offsetLeft;
- var textY=evt.pageY-this.offsetTop;
- //alert(textX+'------'+textY);
- //获取用户输入的信息
- //window.prompt(对话框提示,默认值);
- var userVal=window.prompt('请在这里输入文字','');
- //alert(userVal);
- //将用户输入的文字写到画布中对应的坐标点上。
- if(userVal!=null){
- cxt.fillText(userVal,textX,textY);
- }
- }
- canvas.onmousemove=null;
- canvas.onmouseup=null;
- canvas.onmouseout=null;
- }
- //放大镜工具函数
- function drawMagnifier(num){
- setStatus(actions,num,1);
- //用户输入的数据大小
- var scale=window.prompt('请输入要放大的百分比[只能是整型]','100');
- //吧数据转成对应canvas画布的大小
- var scaleW=880*scale/100;
- var scaleH=400*scale/100;
- //将数据设置到对应HTML标签上
- canvas.style.width=parseInt(scaleW)+'px';
- canvas.style.height=parseInt(scaleH)+'px';
- }
- //线形状函数
- function drawLine(num){
- setStatus(actions,num,1);
- canvas.onmousedown=function(evt){
- evt=window.event||evt;
- //获取起始点的坐标(相对于canvas画布的)
- //先获取鼠标距离页面顶端的距离和左端的距离
- //evt.pageY evt.pageX
- //获取当前画布相对页面顶端和左端的距离
- //this.offectTop this.offsetLeft
- //计算当前鼠标相对于canvas画布的距离(以canvas的左上角为0,0)
- var startX=evt.pageX-this.offsetLeft;
- var startY=evt.pageY-this.offsetTop;
- //设置直线的开始点
- cxt.beginPath();//尽量写上开始新路径
- cxt.moveTo(startX,startY);
- }
- canvas.onmousemove=null;//注销掉其他工具注册时间
- canvas.onmouseout=null;//
- //鼠标按键抬起的时候
- canvas.onmouseup=function(evt){
- //计算鼠标抬起时鼠标相对于画布的坐标
- var endX=evt.pageX-this.offsetLeft;
- var endY=evt.pageY-this.offsetTop;
- //设置路径吧开始点和结束点连接起来,然后进行绘图
- cxt.lineTo(endX,endY);
- cxt.closePath();
- cxt.stroke();
- }
- }
- //将变量设置为全局变量(如果是局部变量在其他的函数中无法调用)
- var arcX=0;
- var arcY=0;
- //圆形形状函数
- function drawArc(num){
- setStatus(actions,num,1);
- canvas.onmousedown=function(evt){
- evt=window.event||evt;
- //获取圆心的位置
- arcX=evt.pageX-this.offsetLeft;
- arcY=evt.pageY-this.offsetTop;
- }
- canvas.onmouseup=function(evt){
- evt=window.event||evt;
- //获取半径(目的)
- //实际获取的是一个坐标
- var endX=evt.pageX-this.offsetLeft;
- var endY=evt.pageY-this.offsetTop;
- //计算C的距离
- var a=endX-arcX;
- var b=endY-arcY;
- //计算半径
- var c=Math.sqrt(a*a+b*b);
- cxt.beginPath();
- cxt.arc(arcX,arcY,c,0,360,false);
- cxt.closePath();
- cxt.stroke();
- }
- canvas.onmousemove=null;//注销掉鼠标移动时间
- canvas.onmouseout=null;
- }
- //设置矩形全局变量
- var rectX=0;
- var rectY=0;
- //矩形形状函数
- function drawRect(num){
- setStatus(actions,num,1);
- canvas.onmousedown=function(evt){
- evt=window.event||evt;
- //获取矩形左上角(对角线的开始点)
- rectX=evt.pageX-this.offsetLeft;
- rectY=evt.pageY-this.offsetTop;
- }
- canvas.onmouseup=function(evt){
- evt=window.event||evt;
- //先获取鼠标的当前坐标
- var endX=evt.pageX-this.offsetLeft;
- var endY=evt.pageY-this.offsetTop;
- //计算矩形的宽高
- var rectW=endX-rectX;
- var rectH=endY-rectY;
- //画出矩形
- cxt.strokeRect(rectX,rectY,rectW,rectH);
- }
- canvas.onmousemove=null;
- canvas.onmouseout=null;
- }
- var polyX=0;
- var polyY=0;
- //多边形形状函数
- function drawPoly(num){
- setStatus(actions,num,1);
- canvas.onmousedown=function(evt){
- evt=window.event||evt;
- polyX=evt.pageX-this.offsetLeft;
- POLyY=evt.pageY-this.offsetTop;
- }
- canvas.onmouseup=function(evt){
- evt=window.event||evt;
- var endX=evt.pageX-this.offsetLeft;
- var endY=evt.pageY-this.offsetTop;
- cxt.beginPath();
- //将画笔移动到右下角的顶点
- cxt.moveTo(endX,endY);
- //计算左下角的顶点坐标
- var lbX=2*polyX-endX;
- var lbY=endY;
- cxt.lineTo(lbX,lbY);
- //设置第三个顶点的坐标
- var tmpC=2*(endX-polyX);
- var tmpA=endX-polyX;
- var tmpB=Math.sqrt(tmpC*tmpC-tmpA*tmpA);
- //计算最上面顶点坐标
- //endY-tmpB 定点的Y坐标 polyX是顶点的X坐标
- //画到顶点
- cxt.lineTo(polyX,endY-tmpB);
- //封闭路径->画出来
- cxt.closePath();
- cxt.stroke();
- }
- canvas.onmousemove=null;
- canvas.onmouseout=null;
- }
- //圆形填充形状函数
- function drawArcFill(num){
- setStatus(actions,num,1);
- canvas.onmousedown=function(evt){
- evt=window.event||evt;
- //获取圆心的位置
- arcX=evt.pageX-this.offsetLeft;
- arcY=evt.pageY-this.offsetTop;
- }
- canvas.onmouseup=function(evt){
- evt=window.event||evt;
- //获取半径(目的)
- //实际获取的是一个坐标
- var endX=evt.pageX-this.offsetLeft;
- var endY=evt.pageY-this.offsetTop;
- //计算C的距离
- var a=endX-arcX;
- var b=endY-arcY;
- //计算半径
- var c=Math.sqrt(a*a+b*b);
- cxt.beginPath();
- cxt.arc(arcX,arcY,c,0,360,false);
- cxt.closePath();
- cxt.fill();
- }
- canvas.onmousemove=null;//注销掉鼠标移动时间
- canvas.onmouseout=null;
- }
- //矩形填充形状函数
- function drawRectFill(num){
- setStatus(actions,num,1);
- setStatus(actions,num,1);
- canvas.onmousedown=function(evt){
- evt=window.event||evt;
- //获取矩形左上角(对角线的开始点)
- rectX=evt.pageX-this.offsetLeft;
- rectY=evt.pageY-this.offsetTop;
- }
- canvas.onmouseup=function(evt){
- evt=window.event||evt;
- //先获取鼠标的当前坐标
- var endX=evt.pageX-this.offsetLeft;
- var endY=evt.pageY-this.offsetTop;
- //计算矩形的宽高
- var rectW=endX-rectX;
- var rectH=endY-rectY;
- //画出矩形
- cxt.fillRect(rectX,rectY,rectW,rectH);
- }
- canvas.onmousemove=null;
- canvas.onmouseout=null;
- }
- //线宽设置函数
- function setLineWidth(num){
- setStatus(widths,num,1);
- switch(num){
- case 0:
- cxt.lineWidth=1;
- break;
- case 1:
- cxt.lineWidth=3;
- break;
- case 2:
- cxt.lineWidth=5;
- break;//第14讲补充的break 原因:遗漏
- case 3:
- cxt.lineWidth=8;
- break;
- default:
- cxt.lineWidth=1;
- }
- }
- //颜色设置函数
- function setColor(obj,num){
- setStatus(colors,num,0);
- //设置画笔颜色和填充颜色
- cxt.strokeStyle=obj.id;
- cxt.fillStyle=obj.id;
- }
html文件:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>HTML5在线画图板</title>
- <link href="canvas.css" type="text/css" rel="stylesheet" />
- </head>
- <body>
- <header id="header">HTML5在线画板</header>
- <section id="content">
- <!--工具区域-->
- <ul id="tool">
- <li>
- <h3>图像</h3>
- <hr />
- <ul id="image">
- <li id="saveimg">
- <form id="myform" action="http://localhost/down.php" method="post">
- <input type="hidden" id="data" name="data" value="" />
- <button onclick="saveimg()" type="button">保存图片</button>
- </form>
- </li>
- <li id="clearimg"><button onclick="clearimg()">清空画板</button></li>
- </ul>
- </li>
- <li>
- <h3>工具</h3>
- <hr />
- <ul id="means">
- <li id="means_brush" onclick="drawBrush(0)">
- <img src="data:images/Brush.png" />
- </li>
- <li id="means_eraser" onclick="drawEraser(1)">
- <img src="data:images/Eraser.png" />
- </li>
- <li id="means_paint" onclick="drawPaint(2)">
- <img src="data:images/Paint.png" />
- </li>
- <li id="means_straw" onclick="drawStraw(3)">
- <img src="data:images/Straw.png" />
- </li>
- <li id="means_text" onclick="drawText(4)">
- <img src="data:images/text.png" />
- </li>
- <li id="means_magnifier" onclick="drawMagnifier(5)"><img src="data:images/Magnifier.png" /></li>
- </ul>
- </li>
- <li>
- <h3>形状</h3>
- <hr />
- <ul id="shape">
- <li id="shape_line" onclick="drawLine(6)">
- <img src="data:images/line.png" />
- </li>
- <li id="shape_arc" onclick="drawArc(7)">
- <img src="data:images/arc.png" />
- </li>
- <li id="shape_rect" onclick="drawRect(8)">
- <img src="data:images/rect.png" />
- </li>
- <li id="shape_poly" onclick="drawPoly(9)">
- <img src="data:images/poly.png" />
- </li>
- <li id="shape_arcfill" onclick="drawArcFill(10)">
- <img src="data:images/arcfill.png" />
- </li>
- <li id="shape_rectfill" onclick="drawRectFill(11)">
- <img src="data:images/rectfill.png" />
- </li>
- </ul>
- </li>
- <li>
- <h3>线宽</h3>
- <hr />
- <ul id="size">
- <li id="width_1" onclick="setLineWidth(0)">
- <img src="data:images/line1px.png" />
- </li>
- <li id="width_3" onclick="setLineWidth(1)">
- <img src="data:images/line3px.png" />
- </li>
- <li id="width_5" onclick="setLineWidth(2)">
- <img src="data:images/line5px.png" />
- </li>
- <li id="width_8" onclick="setLineWidth(3)">
- <img src="data:images/line8px.png" />
- </li>
- </ul>
- </li>
- <li>
- <h3>颜色</h3>
- <hr />
- <ul id="color">
- <li id="red" onclick="setColor(this,0)"></li>
- <li id="green" onclick="setColor(this,1)"></li>
- <li id="blue" onclick="setColor(this,2)"></li>
- <li id="yellow" onclick="setColor(this,3)"></li>
- <li id="white" onclick="setColor(this,4)"></li>
- <li id="black" onclick="setColor(this,5)"></li>
- <li id="pink" onclick="setColor(this,6)"></li>
- <li id="purple" onclick="setColor(this,7)"></li>
- <li id="cyan" onclick="setColor(this,8)"></li>
- <li id="orange" onclick="setColor(this,9)"></li>
- </ul>
- </li>
- </ul>
- <!--绘图区域-->
- <canvas id="canvas" width="880" height="400">
- 您的浏览器不支持canvas标签,请升级浏览器
- </canvas>
- <!--请在canvas标签之后连入JS文件--->
- <script src="canvas.js"></script>
- </section>
- <footer id="footer">
- <small>版权所有,盗版不究 @ LAMP兄弟连丛浩</small>
- </footer>
- </body>
- </html>
HTML5 小实例的更多相关文章
- HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 【HTML5】实例练习
1.许多时髦的网站都提供视频.如果在网页上展示视频? <!DOCTYPE HTML> <html> <body> <video width="320 ...
- 推荐10款超级有趣的HTML5小游戏
HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...
- winform 异步读取数据 小实例
这几天对突然对委托事件,异步编程产生了兴趣,大量阅读前辈们的代码后自己总结了一下. 主要是实现 DataTable的导入导出,当然可以模拟从数据库读取大量数据,这可能需要一定的时间,然后 再把数据导入 ...
- CSS应用内容补充及小实例
一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- Objective-C之代理设计模式小实例
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- Objective-C之@类别小实例
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- OC小实例关于init方法不小心的错误
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- canva实践小实例 —— 马赛克效果
前面给大家带来了操作像素的API,此时此刻,我觉得应该配以小实例来进行进一步的说明和演示,以便给大家带来更宽广的视野和灵感,你们看了我的那么多的文章,应该是懂我的风格,废话不多说,进入正题: 这次给大 ...
随机推荐
- linux_api之进程环境
本篇索引: 1.引言 2.main函数 3.进程的终止方式 4.exit和_exit函数 5.atexit函数 7.环境表 8.C程序程序空间布局 9.存储空间的手动分配 10.库文件 1.引言 一个 ...
- pat1013. Battle Over Cities (25)
1013. Battle Over Cities (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue It ...
- DevExpress 14.2 批量汉化
1.下载DevExpress_.NET_Localization_Resources_14.2汉化包 2.解压后将zh-CN或zh-CHS复制到安装目录如D:\Program Files (x86)\ ...
- C#利用事件与委托进行窗体间传值简单小例子
本篇博客是利用C#委托与事件进行窗体间传值的简单小例子 委托与事件的详细解释大家可以参照张子阳的博客: http://www.tracefact.net/CSharp-Programming/Dele ...
- PAT 1021 Deepest Root
#include <cstdio> #include <cstdlib> #include <vector> using namespace std; class ...
- 【代码笔记】Java连连看项目的实现(1)——JTable 、TableModel的使用
javax.swing.table.TableModel和javax.swing.JTable JTable .TableModel是Java里面画表格的包. TableModel:为Table提供显 ...
- String字符串操作
char chars[] ={'a','b','c'}; String s = new String(chars); int len = s.length();//字符串长度 System.out.p ...
- php基础--取默认值以及类的继承
(1)对于php的默认值的使用和C++有点类似,都是在函数的输入中填写默认值,以下是php方法中对于默认值的应用: <?phpfunction makecoffee($types = array ...
- HTML 5入门知识(四)
表单的作用 表单不是表格,既不用来显示数据,也不用来布局网页.表单提供一个界面,一个入口,便于用户把数据提交给后台程序进行处理. 表单的数据传递方式method属性 表单的method属性用于指定在数 ...
- SQL 创建自定义方法,匹配正则
C#代码 using System.Text.RegularExpressions; public class FunctionRegex { [Microsoft.SqlServer.Server. ...