• html----canvas


    <canvas>标签用于绘制图像,但本身并无绘制能力,需使用脚本来完成实际的绘画任务。getContext()方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。

    一般,var  c=document.getElementById("canvas");
               var ctx=c.getContext("2d");
               ctx.fillStyle="#FF0000";
        ctx.fillRect(20,20,150,150);

    颜色、样式、阴影

    属性        描述

    fillStyle       设置或返回用于充填绘画的颜色、渐变或模式         context.fillStyle=color|gradient|pattern;
    strokeStyle         设置或返回用于笔触的颜色、渐变或模式。       context.strokeStyle=color|gradient|pattern;
    shadowColor      设置或返回用于阴影的颜色。       context.shadowColor=color;
    shadowBlur      设置或返回用于阴影的模糊级别。    context.shadowBlur=number
    shadowOffsetX             设置或返回阴影与形状的水平距离    context.shadowOffsetX=number;
    shadowOffsetY     设置或返回阴影与形状的垂直距离。 context.shadowOffsetY=number;

    方法                                 描述

    createLinearGradient()     创建线性渐变(用在画布内容上)       context.createLinearGradient(x0,y0,x1,y1);
    createPattern()       在指定的方向上重复指定的元素。  context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat")
    createRadialGradient()   创建放射状/环形的渐变(用在画布内容上)。   context.createRadialGradient(x0,y0,r0,x1,y1,r1);
    addColorStop()     规定渐变对象中的颜色和停止位置。  gradient.addColorStop(stop,color);

    线条样式

      属性         描述

    lineCap        设置或返回线条的结束端点样式。     context.lineCap="butt|round|square";
    lineJoin        
    设置或返回两条线相交时,所创建的拐角类型。  context.lineJoin="bevel|round|miter";   (bevel-斜角,round-圆角,miter-默认尖角
    lineWidth        
    设置或返回当前的线条宽度。  context.lineWidth=number;
    miterLimit       
    设置或返回最大斜接长度。      context.miterLimit=number;

    矩形样式

    方法          描述

    rect()          创建矩形          context.rect(x,y,width,height);     (左上角x,左上角y,矩形宽,矩形高)                      
    fillRect()        绘制"被填充"的矩形。   context.fillRect(x,y,width,height);
    strokeRect()      绘制矩形(无填充)。    context.strokeRect(x,y,width,height);
    clearRect()        在给定的矩形内清除指定的像素       context.clearRect(x,y,width,height);

    路径样式

    方法           描述

     fill()              填充当前绘图/路径       context.fill()
    stroke()        绘制已定义的路径        context.stroke()
    beginPath()      起始一条路径,或重置当前路径      context.beginPath()
    moveTo()       把路径移动到画布中的指定点,不创建线条     context.moveTo(x,y)
    closePath()      创建从当前点回到起始点的路径。        context.closePath()
    lineTo()        添加一个新点,然后在画布中创建从该点到最后指定点的线条      context.lineTo(x,y);
    clip()         从原始画布剪切任意形状和尺寸的区域。         context.clip();
    quadraticCurveTo()    创建二次贝塞尔曲线。      context.quadraticCurveTo(cpx,cpy,x,y);
    bezierCurveTo()    创建三次贝塞尔曲线。     context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
    arc()         创建弧/曲线(用于创建圆形或部分圆)         context.arc(x,y,r,sAngle,eAngle,counterclockwise);
    arcTo()        创建两切线之间的弧/曲线          context.arcTo(x1,y1,x2,y2,r);
    isPointInPath()      如果指定的点位于当前路径中,则返回 true,否则返回 false           context.isPointInPath(x,y);



     绘制canvas涂鸦画板并下载:

    代码如下:

       

    <!DOCTYPE >
    <html >
    <head>
    <meta charset=utf-8" />
    
    <title>canvas绘图板</title>
    <style>
    canvas{
    	border:1px dashed black;}
    </style>
    <script type="text/javascript">
    var canvas;
    var context;
    window.onload=function(){   //onload 事件会在页面或图像加载完成后立即发生
    	canvas=document.getElementById("drawingCanvas");
    	context=canvas.getContext("2d");
    	context.fillStyle="rgb(255,255,255)";   //rgb(255,255,255)白色
    	context.fillRect(0,0,canvas.width,canvas.height);  
    	context.strokeStyle="rgb(0,0,0)";  //笔触颜色
    	context.lineWidth=5;
    	canvas.onmousedown=startDrawing;
    	canvas.onmouseup=stopDrawing;   //onmouseup-鼠标按键被松开时发生
    	canvas.onmouseout=stopDrawing;  //onmouseout 属性在鼠标指针移动到元素外时触发
    	canvas.onmousemove=draw;       //onmousemove 事件会在鼠标指针移到指定的对象时发生
    };
    
    
    function changeColor(color){
    	context.strokeStyle=color;	
    }
    
    var isDrawing=false;
    function startDrawing(e){
    	isDrawing=true;
    	context.beginPath();
    	context.moveTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);
    	}
    function draw(e){
    	if(isDrawing==true){
    		var x=e.pageX-canvas.offsetLeft;
    		var y=e.pageY-canvas.offsetTop;
    		context.lineTo(x,y);
    		context.stroke();
    		}
    	}
    function stopDrawing(){
    	isDrawing=false;
    	}
    function clearCanvas(){
    	context.fillStyle="rgb(255,255,255)";
    	context.fillRect(0,0,canvas.width,canvas.height);
    	}
    function savecanvas(){
        var w=window.open(canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"),"smallwin","width=400,height=350");
        return w;
    }
    </script>
    </head>
    <body>
    	<div align="center">
    		COLOR<input type="color" id="colorSelect" onchange="changeColor(colorSelect.value);" value="rgb(255,255,255)"/>      
    		WIDTH<input type="range" id="widthSelect" onchange="context.lineWidth=widthSelect.value;" min="1" max="20" value="5"/>      
    		<button id="clearCanvas" onclick="clearCanvas();">CLEAR ALL</button>   
    		<a id="link"></a>
    		<button id="savecanvas" onclick="savecanvas();">SAVE</button>
    		<br/>
    		<canvas id="drawingCanvas" width="800" height="400"></canvas>
    	</div>
    </body>
    </html>
    

     实现效果如下:

     

     

  • 相关阅读:
    aspjpeg组件安装、使用常见问题
    调用过程sub时不能使用括号
    asp中,使用js打开别的网址注意点
    让文件夹属性出现“安全”选项卡
    C#正则表达式使用<转载备用>
    .NET编程中常用的路径表示方式<转>
    DIVWEB布局
    winform report<收藏>
    Delphi中MessageBox用法
    DW中常用标签
  • 原文地址:https://www.cnblogs.com/suyun1219/p/11711872.html
Copyright © 2020-2023  润新知