精华内容
下载资源
问答
  • Canvas绘图

    2019-02-28 15:00:11
    Canvas绘图 Canvas简介 Canvas是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。 canvas标记和SVG以及VML canvas有...

    Canvas绘图

    Canvas简介

    • Canvas是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
    • canvas标记和SVG以及VML
      • canvas有一个基于js绘图的api;移除元素时需要擦掉绘图重新绘制它
      • SVG和VML使用xml文档来绘图;移除元素时比较容易编辑

    静态绘图

    • 结果展示
    • 代码

       

      <!DOCTYPE html>
      <html>
      <head> 
      <meta charset="utf-8"> 
      <title>demo</title> 
      </head>
      <body>
      
      <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
      您的浏览器不支持 HTML5 canvas 标签!
      </canvas>
      
      <script>
      
      //获取canvas对象
      var c=document.getElementById("myCanvas");
      
      //判断浏览器是否支持Canvas
      if(c.getContext){
      
      //获取画笔【平面图形】
      var ctx=c.getContext("2d");
      
      //设置颜色
      ctx.fillStyle="#FF0000";
      
      //绘制矩形
      ctx.fillRect(25,12.5,150,75);//开始x,开始y,结束x,结束y
      
      //canvas绘制--路径
      ctx.moveTo(0,0);
      ctx.lineTo(200,100);
      ctx.stroke();
      
      //canvas绘制--文字
      ctx.fillStyle="#00ff00";
      ctx.font="20px Arial"
      ctx.fillText("Hello World",50,40);//数据,开始x,开始y
      
      //canvas绘制--图片
      var img=new Image();
      img.src="https://www.baidu.com/img/bd_logo1.png?where=super";
      img.onload=function(){
          ctx.drawImage(img,70,50,70,30);//图片对象,开始x,开始y,长,宽
      };
      
      }
      </script>
      
      </body>
      </html>
      

    鼠标事件动态绘图

    • 结果展示
    • 代码

       

      <!DOCTYPE html>
      <html>
      <head> 
      <meta charset="utf-8"> 
      <title>demo</title> 
      </head>
      <body>
      
      <canvas id="canvas" width="600" height="400" style="background-color: #0f0"></canvas>
      <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
      
      <script>
      
      var canvas = document.getElementById('canvas'); // 得到画布
      var ctx = canvas.getContext('2d'); // 得到画布的上下文对象
      var flag = false;
      var x = 0; // 鼠标开始移动的位置X
      var y = 0; // 鼠标开始移动的位置Y
      var url = 'https://www.baidu.com/img/bd_logo1.png?where=super'; // canvas图片的二进制格式转为dataURL格式
      
      /* 为canvas绑定mouse事件 */
      $('canvas').mousedown(function(e){
          flag = true;
          x = e.offsetX; // 鼠标落下时的X
          y = e.offsetY; // 鼠标落下时的Y
      }).mouseup(function(e){
          flag = false;
          url = $('canvas')[0].toDataURL(); // 每次 mouseup 都保存一次画布状态
      }).mousemove(function(e){
         drawRect(e); // 绘制方法
      
         drawLine(e);//绘制直线
      
         drawCircle(e);//绘制圆圈
      
         //loadImage(e);  //绘制图片
      
      });
      
      function drawPencil(e){
          if(flag){
              ctx.lineTo(e.offsetX,e.offsetY);
              ctx.stroke(); // 调用绘制方法 
          }else{
              ctx.beginPath();
              ctx.moveTo(x,y);
          }
      }
      
      function drawRect(e){
          if(flag){
              //ctx.clearRect(0,0,canvas.width,canvas.height);
              ctx.beginPath();
              ctx.strokeRect(x,y,e.offsetX-x,e.offsetY-y);
          }
      }
      
      function drawLine(e){
          if(flag){
             // ctx.clearRect(0,0,canvas.width,canvas.height);
              ctx.beginPath();
              ctx.moveTo(x,y);
              ctx.lineTo(e.offsetX,e.offsetY);
              ctx.stroke();   
          }
      }
      
      function drawCircle(e){
          if(flag){
             //ctx.clearRect(0,0,canvas.width,canvas.height);
              ctx.beginPath();
              var rx = (e.offsetX-x)/2;
              var ry = (e.offsetY-y)/2;
              var r = Math.sqrt(rx*rx+ry*ry);
              ctx.arc(rx+x,ry+y,r,0,Math.PI*2); // 第5个参数默认是false-顺时针
              ctx.stroke();
          }
      }
      
      function loadImage(e){
          if(flag){
              var img = new Image();
              img.src = url;
              ctx.drawImage(img,x,y,e.offsetX-x,e.offsetY-y);
          }
      }
      
      </script>
      
      </body>
      </html>
    展开全文
  • canvas绘图

    2018-09-24 15:00:21
    canvas绘图是HTML5新增的功能,配合js可以完成诸多绘制功能,如开发组件。 首先通过&lt;canvas.../&gt;定义一张画布,获取CanvasRendingContext2D对象,然后调用CanvasRendingContext2D的方法进行绘图。...

    canvas绘图是HTML5新增的功能,配合js可以完成诸多绘制功能,如开发组件。

    首先通过<canvas.../>定义一张画布,获取CanvasRendingContext2D对象,然后调用CanvasRendingContext2D的方法进行绘图。常用元素如下:

    fillRect():填充一个矩形区域;

    strokeRect:绘制一个矩形边框;

    beginPath()/closePsth():开始和关闭定义的路径;

    arc(double x,double y, double radius, double startAngle,endAngle,boolean counterlockwise ):添加一段圆弧,(x,y)为圆心,radius 为半径,startAngle,endAngle分别定义开始角度和结束角度,counterlockwise判断是否顺时针;

    bezierCurveTo():定义一段贝济埃曲线;

    clearRect():擦掉矩形区域绘制的图形;

    fill():填充当前canvas路径;

    fillText():填充字符串;

    moveTo():吧当前路径移至此点;

    lineTo():连接当前点到结束点的路径;

    常用属性

    fillStyle:设置填充风格;

    strokeStyle:设置绘制路径的填充风格;

    lineJoin:设置线条连接点的风格;

    lineWidth:设置线条宽度。

     

    基本元素应用实例:

    
    <html>
    <head>
    <title>绘图</title>
    	<meta charset="utf-8" />
    </head>
    
    <body>
    	<canvas id="mc" width="400" height="280" style="border:1px solid black"></canvas>
    <script>
    	var canvas=document.getElementById("mc");
    	var ctx=canvas.getContext('2d');
    	ctx.fillStyle="#f00";
    	ctx.fillRect(30,20,120,60);
    
    	ctx.fillStyle="#ff0";
    	ctx.fillRect(80,60,120,60);
    
    	ctx.strokeStyle="#f00";
    	ctx.lineWidth=10;
    	ctx.strokeRect(30,130,120,60);
    	
    	ctx.strokeStyle="#0ff";
    	ctx.lineJoin="round";
    	ctx.strokeRect(80,16,120,60);
    	
    	ctx.strokeStyle="#f0f";
    	ctx.lineJoin="bevel";
    	ctx.strokeRect(130,190,120,60);
    
    </script>
    
    <body>
    </html>

    显示效果:

    点线模式示例:

    
    
    <html>
    <head>
    <title>绘图1</title>
    	<meta charset="utf-8" />
    </head>
    
    <body>
    	<canvas id="mc" width="400" height="280" style="border:1px solid black"></canvas><br/>
    
    	选择点线模式:<select id="lineDash" onchange="changeLineDash(this.value);"></select><br/>
    	点线相位:<input type="range" id="lineDashOffset" style="width:300px" onchange="changeLineDashOffset(this.value);" />
    
    <script>
    	var lineDashArr=[
    	[2,2],
    	[2.0,4.0,2.0],
    	[2.0,4.0,6.0],
    	[2.0,4.0,2.0,6.0],
    	[2.0,2.0,4.0,4.0],
    	[2.0,2.0,4.0,6.0,10.0]
    	];
    	var phaseMax=20;
    	var phaseMin=-20;
    
    	var lineDashEle=document.getElementById("lineDash");
    	
    	for(var i=0;i<lineDashArr.length;i++){
    	lineDashEle.options[i]=new Option(lineDashArr[i],i);
    	}
    	lineDashEle.options[0].selected=true;
    	
    	var lineDashOffsetEle=document.getElementById("lineDashOffset");
    	lineDashOffsetEle.max=phaseMax;
    	lineDashOffsetEle.min=phaseMin;
    	lineDashOffsetEle.step=0.1;
    	lineDashOffsetEle.value=0;
    	var lineDash=lineDashArr[0];
    	var lineDashOffset=0;
    
    	function draw(){
    	var canvas=document.getElementById("mc");
    	var ctx=canvas.getContext('2d');
    	ctx.fillStyle="#fff";
    	ctx.fillRect(0,0,400,280);
    
    	ctx.strokeStyle="#f0f";
    	ctx.lineWidth=2;
    	ctx.setLineDash(lineDash);
    	ctx.lineDashOffset=lineDashOffset;
    	ctx.strokeRect(40,60,120,120);
    	ctx.beginPath();
    	ctx.arc(300,120,60,0,Math.PI*2,true);
    
    	ctx.moveTo(30,30);
    	ctx.lineTo(360,30);
    
    	ctx.moveTo(200,50);
    	ctx.lineTo(200,240);
    	ctx.closePath();
    	ctx.stroke();
    	}
    
    	function changeLineDash(i){
    	lineDash=lineDashArr[i];
    	draw();
    	}
    
    	function changeLineDashOffset(val){
    	lineDashOffset=val;
    	draw();
    	}
    	draw();
    </script>
    
    <body>
    </html>

    显示效果:

    月亮从海上升起制作效果展示(海上生明月,天涯共此时):

    <html>
    <head>
    <title>绘图</title>
    	<meta charset="utf-8" />
    </head>
    
    <body style="margin:0;">
    <div style="margin:0;">
    	<canvas id="mc" width="800" height="500" style="border:1px solid black;border-bottom-color:white;"></canvas>
    	<div>
    	
    	
    	<div style="margin:0;">
    	<canvas id="ac" width="800" height="200" style="border:1px solid black;border-top-color:white;"></canvas>
    	<div>
    	
    	
    <script>
    
    
    	var radius=50;
    	var ySpeed=0.5;
    	var xSpeed=0.25;
    	var x=400;
    	var y=500;
    	
    	var canvas=document.getElementById("mc");
    	canvas.width = canvas.parentNode.offsetWidth;
    	var ctx=canvas.getContext('2d');
    	ctx.fillStyle="yellow";
    	ctx.arc(x,y,50,0,Math.PI*2,true);
    	ctx.fill();
    	<!--   **********************      -->
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	<!--   **********************      -->
        <!--月亮升起效果-->
    	function draw(){
    	ctx.fillStyle="#fff";
    	ctx.clearRect(200-radius,y-radius-ySpeed,x+radius,y+radius);
    	y-=ySpeed;
    	x-=xSpeed;
    	radius+=0.075;
    	ctx.fillStyle="yellow";
    	ctx.beginPath();
    	ctx.arc(x,y,radius,0,Math.PI*2,true);
    	ctx.closePath();
    	ctx.fill();
    
    	}
    	
    	setInterval(draw,12);
    
    	
    	
    	
    	<!--右侧文字显示效果-->
    	
    	function myFont1(){
    	ctx.fillStyle="#EDD994";
    	ctx.font="italic 80px '隶书'";
    	ctx.fillText("海",800,130);
    	}
    	function myFont2(){
    	ctx.fillStyle="#EDD994";
    	ctx.font="italic 80px '隶书'";
    	ctx.fillText("上",900,130);
    	}
    	function myFont3(){
    	ctx.fillStyle="#EDD994";
    	ctx.font="italic 80px '隶书'";
    	ctx.fillText("升",1000,130);
    	}
    	function myFont4(){
    	ctx.fillStyle="#EDD994";
    	ctx.font="italic 80px '隶书'";
    	ctx.fillText("明",1100,130);
    	}
    	function myFont5(){
    	ctx.fillStyle="#EDD994";
    	ctx.font="italic 80px '隶书'";
    	ctx.fillText("月",1200,130);
    	}
    	function myFont6(){
    	ctx.fillStyle="#EDD994";
    	ctx.font="italic 80px '隶书'";
    	ctx.fillText("天",850,230);
    	}
    	function myFont7(){
    	ctx.fillStyle="#EDD994";
    	ctx.font="italic 80px '隶书'";
    	ctx.fillText("涯",950,230);
    	}
    	function myFont8(){
    	ctx.fillStyle="#EDD994";
    	ctx.font="italic 80px '隶书'";
    	ctx.fillText("共",1050,230);
    	}
    	function myFont9(){
    	ctx.fillStyle="#EDD994";
    	ctx.font="italic 80px '隶书'";
    	ctx.fillText("此",1150,230);
    	}
    	function myFont10(){
    	ctx.fillStyle="#EDD994";
    	ctx.font="italic 80px '隶书'";
    	ctx.fillText("时",1250,230);
    	}
    	
    	
    	
    	
    	setTimeout(myFont1,1500);
    	setTimeout(myFont2,2000);
    	setTimeout(myFont3,2500);
    	setTimeout(myFont4,3000);
    	setTimeout(myFont5,3500);
    	setTimeout(myFont6,4500);
    	setTimeout(myFont7,5000);
    	setTimeout(myFont8,5500);
    	setTimeout(myFont9,6000);
    	setTimeout(myFont10,6500);
    	
    	
    	
    	
    	<!--底部波浪效果-->
    	var canvas = document.getElementById('ac');
    	var ctc = canvas.getContext('2d');
    	canvas.width = canvas.parentNode.offsetWidth;
    	canvas.height = 200;
    	
    	
    	ctc.fillStyle = "rgba(0,222,255, 0.2)";
    	ctc.beginPath();
    	ctc.moveTo(0, canvas.height/2);
    	ctc.lineTo(canvas.width, canvas.height/2);
    	ctc.lineTo(canvas.width, canvas.height);
    	ctc.lineTo(0, canvas.height);
    	ctc.lineTo(0, canvas.height/2);
    	ctc.closePath();
    	ctc.fill();
    	
    	window.requestAnimFrame = (function(){
    	return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ){
              window.setTimeout(callback, 1000 / 60);
            };
    	})();
    	
    
    	var lines = ["rgba(0,222,255, 0.2)",
                   "rgba(157,192,249, 0.2)",
                   "rgba(0,168,255, 0.2)",
    			   "rgba(10,168,220, 0.2)",
    			   "rgba(0,168,220, 0.2)",
    			   "rgba(0,128,250, 0.1)"
    			   ];
    	
    
    	var step = 0;
    	function loop(){
        ctc.clearRect(0,0,canvas.width,canvas.height);
        
        step++;
    	for(var j = lines.length - 1; j >= 0; j--) {
            ctc.fillStyle = lines[j];
        var angle = (step+j*45)*Math.PI/180;
        var deltaHeight   = Math.sin(angle) * 90;
    	var deltaHeightRight   = Math.cos(angle) * 90;
        ctc.beginPath();
    	ctc.moveTo(0, canvas.height/2+deltaHeight);
    	ctc.bezierCurveTo(canvas.width /2, canvas.height/2+deltaHeight-50, canvas.width / 2, 
    	canvas.height/2+deltaHeightRight-50, canvas.width, canvas.height/2+deltaHeightRight);
    	ctc.lineTo(canvas.width, canvas.height);
    	ctc.lineTo(0, canvas.height);
    	ctc.lineTo(0, canvas.height/2+deltaHeight);
    	ctc.closePath();
    	ctc.fill();
    	}
        requestAnimFrame(loop);
    	}
    	loop();
    	
    
    	
    	
    	
    	
    	
    	
    	
    
    </script>
    
    <body>
    </html>

    效果如下:

    截图无法显示出动态效果,建议复制后运行显示。

    展开全文
  • canvas 绘图

    2019-02-21 23:52:28
    一、简述 canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,... 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成,但功能明显要弱一些。...
    1. 简述

    canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术。 标记和 SVG以及 VML 之间的一个重要的不同是,< canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成,但功能明显要弱一些。
    canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。

    1. 创建canvas元素

    创建了canvas元素后,要在canvas元素上面绘制图象,首先必须获取canvas环境上下文:canvas.getContext(画布上绘制的类型)

    2d: 表示2维
    experimental-webgl: 表示试验版3维
    webgl:表示3维
    

    例1:绘制线条

    <canvas id="can"></canvas>
    <script>
        var can=document.getElementById("can");    //获取canvas元素
        //动态设置宽和高
        //获取屏幕的可视区域宽与高
        var window_w=document.documentElement.clientWidth;
        var window_h=document.documentElement.clientHeight;
        can.width=window_w;
        can.height=window_h;
        //操作canvas
         var content=can.getContext("2d");  //转换为2d模式
        //使用js提供的API设置
    
        /*1.绘制线条*/
        content.lineWidth=10;   /*设置线宽*/
        content.strokeStyle="red";  /*设置线的颜色*/
        content.moveTo(0,0);   /*将画笔移动到0,0点*/
        content.lineTo(300,400);  /*画线到300,400点*/
        content.stroke();    /*执行画线*/
    </script>
    

    运行效果:
    在这里插入图片描述在页面上就显示了一条直线,另存为后就是一张背景透明的png图片。

    1. 画线

      context.moveTo(x,y):把画笔移动到x,y坐标,建立新的子路径;
      context.lineTo(x,y):建立上一个点到x,y坐标的直线,如果没有上一个点,则等同于moveTo(x,y),把(x,y)添加到子路径中;
      context.stroke() :执行画线
      

    例2:结合javascript事件实现鼠标自由划线:

    <canvas id="can"></canvas>
    <script>
        var can=document.getElementById("can");   //获得画布元素
        //动态设置宽和高
        //获取屏幕的可视区域宽与高
        var window_w=document.documentElement.clientWidth;
        var window_h=document.documentElement.clientHeight;
        can.width=window_w;
        can.height=window_h;    
        var content=can.getContext("2d");  //获得2维绘图的上下文
        content.lineWidth=8;    //设置线宽
        content.strokeStyle="gold";     //设置线的颜色
        //设置鼠标移动事件
        can.onmousemove=function(e){
            content.lineTo(e.clientX, e.clientY);   //划线到当前客户端的x与y坐标
            content.stroke();  //执行画线
        }
    </script>
    

    运行效果:

    在这里插入图片描述

    1. 路径与beginPath,closePath,fill

      canvas的环境上下文中总有唯一一个路径,路径包含多个子路径,这些子路径可以看成是一系列点的集合。
      beginPath():清空子路径,一般用于开始路径的创建;在几次循环地创建路径的过程中,每次开始创建时都要调用beginPath函数。
      closePath():如果当前子路径是打开的,就关闭它;否则把子路径中的最后一个点和路径中的第一个点连接起来,形成闭合回路。
      canvas绘图有两种模式:一种是fill,一种是stroke,fill是填充,stroke是描边线,fillstyle与strokeStyle指定绘图样式
      

    例3:路径的演示

    <canvas id="can"></canvas>
    <script>
        var can=document.getElementById("can");   //获得画布元素
        //动态设置宽和高
        //获取屏幕的可视区域宽与高
        var window_w=document.documentElement.clientWidth;
        var window_h=document.documentElement.clientHeight;
        can.width=window_w;
        can.height=window_h;
        var content=can.getContext("2d");  //获得2维绘图的上下文
        content.lineWidth=8;  //设置线宽
        content.strokeStyle="pink";   //设置线的颜色
        content.moveTo(0,0);  //移动画笔到0,0点
        content.lineTo(300,300);  //画线到300,300的位置
        content.stroke();  //执行描边
    
        content.beginPath();  //清空子路径,一般用于开始路径的创建
        content.moveTo(300,300);
        content.lineTo(0,600);
        content.lineTo(600,600);
        content.closePath();  //闭合
        content.fillStyle="purple";  //设置填充颜色
        content.fill();  //执行填充
    </script>
    

    运行效果:
    在这里插入图片描述

    1. 绘制矩形

      context.strokeRect(x,y,width,height):以x,y为左上角,绘制宽度为width,高度为height的矩形;
      context.fillRect(x,y,width,height):以x,y为左上角,填充宽度为width,高度为height的矩形;
      context.clearRect(x,y,width,height):清除以x,y为左上角,宽度为width,高度为height的矩形区域
      

    例4:绘制矩形

    <canvas id="can"></canvas>
    <script>
        var can=document.getElementById("can");   //获得画布元素
        //动态设置宽和高
        //获取屏幕的可视区域宽与高
        var window_w=document.documentElement.clientWidth;
        var window_h=document.documentElement.clientHeight;
        can.width=window_w;
        can.height=window_h;
        var content=can.getContext("2d");  //获得2维绘图的上下文
        content.lineWidth=8;  //设置线宽
        content.strokeStyle="green";
        content.strokeRect(0,0,600,600);  //画一个空心的矩形
        content.fillStyle="red";
        content.fillRect(200,200,200,200);  //画一个实心矩形
        content.clearRect(250,250,100,100);  //清除指定的矩形区域
    </script>
    

    运行效果:
    在这里插入图片描述

    1. 绘制圆弧

      方法:context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
      解释:arc方法用来绘制一段圆弧路径;以(x,y)圆心位置radius为半径、startAngle为起始弧度、endAngle为终止弧度,而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定,如果为true就是逆时针,false 则为顺时针,Math.PI * 2 刚好为一周。
      

    例5:绘制圆弧

    <canvas id="can"></canvas>
    <script>
        var can=document.getElementById("can");   //获得画布元素
        //动态设置宽和高
        //获取屏幕的可视区域宽与高
        var window_w=document.documentElement.clientWidth;
        var window_h=document.documentElement.clientHeight;
        can.width=window_w;
        can.height=window_h;
        var content=can.getContext("2d");  //获得2维绘图的上下文
        //绘制圆弧
        content.beginPath();
        content.fillStyle="pink";
        content.arc(700,350,200,0,Math.PI,true);
        content.fill();
        content.closePath();
        //绘制圆
        content.beginPath();
        content.fillStyle="orange";
        content.arc(700,400,140,0,Math.PI*2,true);
        content.fill();
        content.closePath();
    </script>
    

    运行效果:
    在这里插入图片描述
    例6:添加渐变色

    使用addColorStop()
    
    content.beginPath();
    var rad=content.createRadialGradient(700,300,50,700,300,200);
    //添加渐变色
    rad.addColorStop(0,"paleturquoise");
    rad.addColorStop(0.2,"lightgreen");
    rad.addColorStop(0.4,"plum");
    rad.addColorStop(0.6,"lightblue");
    rad.addColorStop(0.8,"silver");
    rad.addColorStop(1,"pink");
    content.fillStyle=rad;
    content.arc(700,300,230,0,Math.PI*2,true);
    content.fill();
    content.closePath();
    

    运行效果:
    在这里插入图片描述

    1. 绘制图像

      context.drawImage(image,x,y):把image图像绘制到画布上x,y坐标位置;
      context.drawImage(image,x,y,w,h):把image图像绘制到画布上x,y坐标位置,图像的宽度是w,高度是h;
      context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):截取image图像以sx,sy为左上角坐标,宽度为sw,高度为sh的一块矩形区域绘制到画布上以dx,dy坐标位置,图像宽度是dw,高度是dh
      

    :其中image可以是htmlImageElement元素,htmlcanvasElement元素,htmlVideoElement元素

    例7:绘制图像

    <canvas id="can"></canvas>
    <script>
        var can=document.getElementById("can");   //获得画布元素
        //动态设置宽和高
        //获取屏幕的可视区域宽与高
        var window_w=document.documentElement.clientWidth;
        var window_h=document.documentElement.clientHeight;
        can.width=window_w;
        can.height=window_h;
        var content=can.getContext("2d");  //获得2维绘图的上下文
        var img=document.createElement("img");
        img.src="./image/my_2.png";
        content.lineWidth=6;
        content.strokeStyle="blue";
        content.strokeRect(500,150,300,300);
        content.drawImage(img,0,0,200,200,550,210,200,200);
    </script>
    

    运行效果:
    在这里插入图片描述

    1. 绘制文字

      context.fillText(text,x,y,[maxWidth]):在canvas上填充文字;text表示需要绘制的文字;x,y分别表示绘制在        canvas上的横,纵坐标;最后一个参数可选,表示显示文字的最大宽度,防止文字显示溢出;
      context.strokeText(text,x,y,[maxWidth]):在canvas上描边文字,参数的意义同fillText
      context.font:设置字体
      context.font='italic bolder 48px 黑体';
      

    例8:绘制艺术字

    <canvas id="can"></canvas>
    <script>
        var can=document.getElementById("can");   //获得画布元素
        //动态设置宽和高
        //获取屏幕的可视区域宽与高
        var window_w=document.documentElement.clientWidth;
        var window_h=document.documentElement.clientHeight;
        can.width=window_w;
        can.height=window_h;
        var content=can.getContext("2d");  //获得2维绘图的上下文
        var rad=content.createRadialGradient(700,200,10,700,200,300);
        //添加渐变色
        rad.addColorStop(0,"red");
        rad.addColorStop(0.1,"blue");
        rad.addColorStop(0.2,"green");
        rad.addColorStop(0.3,"pink");
        rad.addColorStop(0.4,"orange");
        rad.addColorStop(0.5,"green");
        rad.addColorStop(0.6,"orange");
        rad.addColorStop(0.7,"blue");
        rad.addColorStop(0.8,"yellow");
        rad.addColorStop(0.9,"red");
        rad.addColorStop(1,"green");
    
        content.beginPath();  //创建路径
        content.font="50px yahei";  //设置字体
        content.strokeStyle=rad;  //设置描边文字颜色
        content.strokeText("Hello World !",400,200,500);  //设置描边文字
    
        content.fillStyle=rad;  //设置填充文字颜色
        content.fillText("Hello World!",800,200,500);  //设置填充文字
        content.closePath();  //关闭路径
    </script>
    

    运行效果:
    在这里插入图片描述

    展开全文
  • canvas绘图工具

    万次阅读 2019-01-21 15:34:36
    关于canvas绘图,在html页面上太方便了。为什么不用SVG呢?SVG大量的操作DOM元素你会发现网页的内存一下就达到几个G非常恐怖,更别说应用到移动端了。百度取了不少经,什么画板涂鸦只是小把戏缺乏实用性,灵活性。...

    关于canvas绘图,在html页面上太方便了。为什么不用SVG呢?SVG大量的操作DOM元素你会发现网页的内存一下就达到几个G非常恐怖,更别说应用到移动端了。百度取了不少经,什么画板涂鸦只是小把戏缺乏实用性,灵活性。当然刚开始还是入了不少坑,用了比如jcanvascript等三方插件。真实效果反而不理想,后来就没用插件。基本实现了各种图形缩放、拖拽、旋转功能,响应式布局。

    下面是实现效果,可以在线绘制工地图然后传给后台。轻便快捷

     好了,我的任务完成了

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,864
精华内容 3,145
关键字:

canvas绘图