画布_画布canvas - CSDN
精华内容
参与话题
  • 使用HTML5画布

    2017-03-19 22:21:33
    一、第一步:使用canvas控件确定画布 二、第二步:使用javascript绘制图形 1、脚本标签 2、步骤: 1)第一步:获取界面的画布 var canvas=document.getElementById("myCanvas");document代表从整个文档中...

    使用HTML5画布:

    一、第一步:使用canvas控件确定画布

    二、第二步:使用javascript绘制图形

    1、脚本标签

      <script type="text/javascript">
      </script>

    2、步骤:

    1)第一步:获取界面的画布

    var canvas=document.getElementById("myCanvas");
    document代表从整个文档中搜索;getElementById按照控件id来获取控件;var canvas定义一个变量来接收获取到的canvas控件

    2)第二步:获取画布的上下文对象(相当于画笔)

    var ctx=canvas.getContext("2d");
    2D代表绘制图形为2D
    3)第三步:绘制图形

    a. 在图形的开始和结束需要:

        ctx.beginPath();//开启路径
        .....//绘制具体的操作
        ctx.closePath();
    b.绘制直线:
        ctx.moveTo(20,20);//起点坐标:将上下文对象移动到40,40这个点
        ctx.lineTo(50,40);//终点坐标:将上下文对象移动到100,40这个点
    c.绘制矩形:

        ctx.rect(90,40,40,30);//100,100是左上角坐标,80,50指宽度和高度
        ctx.strokeStyle="red";//指定边框颜色
        ctx.stroke();//实现方式:绘制边界
        ctx.fillStyle="yellow";//填充内部颜色
        ctx.fill();
        //其他写法
        ctx.strokeRect(90,80,40,30);//绘制空心的矩形
        ctx.fillRect(100,120,60,50);//绘制实心矩形
    d.绘制圆形

        ctx.arc(100,180,20,0,Math.PI*2,false);
    其中,100,180圆心坐标,20是半径,0,Math.PI*2画一个整圆;false代表顺时针方向画圆,true代表逆时针方向画圆,起点固定在三点钟方向,HTML5画圆的实现方式:

    示例一:

    <!doctype html>
    <html>
      <head>
        <title>画布-canvas</title>
      </head>
    <body>
      <canvas id="myCanvas" width="300" height="300" style="border:1px solid red;"></canvas>
      <!--以下代码代表使用JavaScript绘制图形-->
      <script type="text/javascript">
        //第一步:获取界面的画布
        var canvas=document.getElementById("myCanvas");
        //第二步:获取画布的上下文对象
        var ctx=canvas.getContext("2d");
        //第三步:绘制图形
        //1、绘制直线
        ctx.beginPath();//开启路径
        ctx.moveTo(20,20);//起点坐标:将上下文对象移动到40,40这个点
        ctx.lineTo(50,40);//终点坐标:将上下文对象移动到100,40这个点
        //2、绘制三角形
        ctx.lineTo(80,50);
        ctx.lineTo(20,20);
        ctx.stroke();//实现绘制
        ctx.closePath();
        //3、绘制矩形
        ctx.beginPath();
        ctx.rect(90,40,40,30);//100,100是左上角坐标,80,50指宽度和高度
        ctx.strokeStyle="red";//指定边框颜色
        ctx.stroke();//实现方式:绘制边界
        ctx.fillStyle="yellow";//填充内部颜色
        ctx.fill();
        ctx.closePath();
        //其他写法
        ctx.beginPath();
        ctx.strokeRect(90,80,40,30);//绘制空心的矩形
        ctx.closePath();
        ctx.beginPath();
        ctx.fillRect(100,120,60,50);//绘制实心矩形
        ctx.closePath();
        //4、绘制圆形
        ctx.beginPath();
        ctx.arc(100,180,20,0,Math.PI*2,false);//100,180圆心坐标,20是半径,0,Math.PI*2画一个整圆
        ctx.stroke();
        ctx.closePath();
        ctx.beginPath();
        ctx.arc(100,220,20,0,Math.PI,false);//100,220圆心坐标,20是半径,0,Math.PI*2画一个半圆
        ctx.stroke();
        ctx.closePath();//回到起点
        ctx.beginPath();
        ctx.arc(200,220,20,0,Math.PI,true);//100,220圆心坐标,20是半径,0,Math.PI*2画一个半圆
        ctx.closePath();
        ctx.stroke();
      </script>
    </body>
    </html>
    效果如下:


    示例2:实现笑脸

    <!doctype html>
    <html>
      <head>
        <title>画布-canvas</title>
      </head>
    <body>
      <canvas id="myCanvas" width="200" height="200" style="border:1px solid red;"></canvas>
      <script type="text/javascript">
        var canvas=document.getElementById("myCanvas");
        var ctx=canvas.getContext("2d");
        //脸部
        ctx.beginPath();
        ctx.arc(100,100,60,0,Math.PI*2,false);
        ctx.stroke();
        ctx.closePath();
        //嘴巴
        ctx.beginPath();
        ctx.arc(100,115,20,0,Math.PI,false);
        ctx.closePath();
        ctx.stroke();
        //左眼睛
        ctx.beginPath();
        ctx.arc(80,85,12,0,Math.PI*2,false);
        ctx.stroke();
        ctx.closePath();
        //左眼珠
        ctx.beginPath();
        ctx.arc(80,85,5,0,Math.PI*2,false);
        ctx.stroke();
        ctx.fillStyle="black";
        ctx.fill();
        ctx.closePath();
        //右眼睛
        ctx.beginPath();
        ctx.arc(120,85,12,0,Math.PI*2,false);
        ctx.stroke();
        ctx.closePath();
        //右眼珠
        ctx.beginPath();
        ctx.arc(120,85,5,0,Math.PI*2,false);
        ctx.stroke();
        ctx.fillStyle="black";
        ctx.fill();
        ctx.closePath();
      </script>
    </body>
    </html>
    效果如下:


    三、画布实现艺术字的效果

    方法如下:

    <!doctype html>
    <html>
      <head>
        <title>画布-canvas</title>
      </head>
    <body>
      <canvas id="myCanvas" width="250" height="250" style="border:1px solid red;"></canvas>
      <script type="text/javascript">
        var canvas=document.getElementById("myCanvas");
        var ctx=canvas.getContext("2d");
        ctx.font="26px 宋体";//设置字体
        ctx.strokeText("青白江樱花节",10,50,150);//10,60为起点坐标;240代表字显示的宽度
        //添加渐变颜色 蓝色-->黄色-->红色
        //定义线性渐变,从左到右进行渐变,0,0指渐变的起点坐标,150,0是指渐变的终点坐标
        var gradient=ctx.createLinearGradient(0,0,150,0);
        gradient.addColorStop(0,"blue");
        gradient.addColorStop(0.5,"yellow");
        gradient.addColorStop(1,"red");
        //使用渐变:把颜色设置为渐变
        ctx.strokeStyle=gradient;
        ctx.strokeText("青白江樱花节",10,100,150);
    
      </script>
    </body>
    </html>
    效果如下:



    四、画布的特点

    绘制成的图形网页上认为是一张图片,可以保存。




    展开全文
  • html5——画布

    2019-07-31 11:13:35
    一般管他叫画布,因为canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,使用JavaScript控制 点击测试例子 <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width=...

    由于服务器更新,这部分资源内容暂未更新
    我看过一些用Canvas创作特效的例子,非常棒,我讲的连皮毛都不算,只能说介绍下Canvas是个啥。

    一、Canvas

    一般管他叫画布,因为canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,使用JavaScript控制
    点击测试例子

    <!DOCTYPE html>
    	<html>
            <body>
                <canvas id="myCanvas" width="200" height="100"></canvas>
            </body>
            <script type="text/javascript">
                var c=document.getElementById("myCanvas");
                var cxt=c.getContext("2d");
                cxt.fillStyle="#FF0000";
                cxt.fillRect(0,0,150,750);
                </script>
        </html>
    

    二、坐标

    点击测试例子

    <!DOCTYPE HTML>
    <html>
        <head>
            <style type="text/css"> 
                body
                {
                    font-size:90%;
                    font-family:Georgia, 'Times New Roman', Times, serif
                }
            </style>
    
            <script type="text/javascript"> 
                function cnvs_getCoordinates(e)
                {
                x=e.clientX;
                y=e.clientY;
                document.getElementById("xycoordinates").innerHTML="坐标: (" + x + "," + y + ")";
                }
                
                function cnvs_clearCoordinates()
                {
                document.getElementById("xycoordinates").innerHTML="";
                }
            </script>
        </head>
        <body style="margin-left:9px;">
            <p>把鼠标悬停在下面的矩形上可以看到坐标:</p>
            <div id="coordiv" style="float:left;width:1000px;height:500px;border:9px solid #0e4183" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
            <div id="xycoordinates"></div>
        </body>
    </html>
    

    三、线条

    点击测试例子

    <!DOCTYPE HTML>
    <html>
        <body>
            <canvas id="myCanvas" width="900" height="450" style="border:9px solid #274cc7;">
                你的浏览器不支持Canvas!
            </canvas>
            <script type="text/javascript">
                var c=document.getElementById("myCanvas");
                var cxt=c.getContext("2d");
                cxt.moveTo(100,100);
                cxt.lineTo(700,234);
                cxt.lineTo(300,400);
                cxt.stroke();   //stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
            </script>
        </body>
    </html>
    

    四、圆形

    点击测试例子

    <!DOCTYPE HTML>
    <html>
        <body>
            <canvas id="myCanvas" width="900" height="450" style="border:9px solid #353c97;">
                Your browser does not support the canvas element.
            </canvas>
    
            <script type="text/javascript">
    
                var c=document.getElementById("myCanvas");
                var cxt=c.getContext("2d");
                cxt.fillStyle="#c5398f";
                cxt.beginPath();
                cxt.arc(420,225,90,0,Math.PI*2,true);
                cxt.closePath();
                cxt.fill();
    
                
                var d=document.getElementById("myCanvas");
                var xixi=d.getContext("2d");
                xixi.fillStyle="#353c97";
                xixi.beginPath();
                xixi.arc(100,230,89,0,1.5*Math.PI,false);//fasle或true规定应该逆时针还是顺时针绘图
                cxt.closePath();  //选择是否闭合
                cxt.stroke();
            </script>
        </body>
    </html>
    
    

    五、渐变

    谈到渐变,先说说颜色,rgb大家都知道,太简单。不想说,需要提醒的是RGBA,意思是(Red-Green-Blue-Alpha)它是在 RGB 上扩展包括了 “alpha” 通道,运行对颜色值设置透明度。
    颜色表示方法也不知一种,可直接写名字,比如blue颜色名参考
    可以设置rgb或者rgba,比如rgb(136,136,136),每位数最大值为255,还可以使用十六进制表示,该方法对应rgb方法,通常在#后面跟六位数十六进制数,255用十六进制便是即为FF,比如红色即为#FF0000

    点击测试例子

    <!DOCTYPE HTML>
    <html>
            <canvas id="myCanvas" width="700" height="350" style="border:1px solid rgb(174, 170, 197);">
            Your browser does not support the canvas element.
            </canvas>
    
            <script type="text/javascript">
                var c=document.getElementById("myCanvas");
                var cxt=c.getContext("2d");
                var grd=cxt.createLinearGradient(0,0,175,50);
                grd.addColorStop(0,"rgb(0, 255, 0)");
                grd.addColorStop(1,"rgb(66, 49, 161)");
                cxt.fillStyle=grd;
                cxt.fillRect(20,90,600,90);
            </script>
        </body>
    </html>
    

    六、图像

    点击测试例子图片加载会比较慢,服务器比较一般

    <!DOCTYPE HTML>
    <html>
        <head>
            <style type="text/css">
                #drawer
                {
                    text-align: center;
                    padding-top: 200px;
                }
                #myCanvas
                {
                    border:4px solid red;
                }
            </style>
        </head>
        <body>    
            <div id="drawer">
                <canvas id="myCanvas" >
                    当前浏览器不支持canvas元素。
                </canvas>
            </div>
            
            <script type="text/javascript">
                var c=document.getElementById("myCanvas");
                var cxt=c.getContext("2d");
                var img=new Image();
                img.src="BAG.jpg";
                img.onload=function()
                {
                    console.log(img.width);//在控制台输出长和宽(可省略)
                    console.log(img.height);
                    
                    cxt.drawImage(img,0,0,img.width,img.height,0,0,300,150);
                    //drawImage() 方法在画布上绘制图像、画布或视频
                    //注意参数意义drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
                    //(img,x,y)从右下角开始定位   (width,height)规定宽度与高度 
                    //(swidth,sheight)规定被剪切的部分  (sx,sy)规定被剪切部分
                }
    
            </script>
        </body>
    </html>
    

    关于drawImage(img,sx,sy,swidth,sheight,x,y,width,height);的参数

    此处多说两句

    七、视频

    将视频复制到canvas上,(视频源于抖音,有时候不一定能正常访问)
    点击测试例子

    <!DOCTYPE html>
    <html>
        <head>
          <style>
            div
            {
              text-align: center;
            }
          </style>
        </head>
    
        <body>
          <div>
              <p>要使用的视频:</p>
              <video id="video1" controls width="270" autoplay>
                <source src="https://aweme.snssdk.com/aweme/v1/playwm/?s_vid=93f1b41336a8b7a442dbf1c29c6bbc56c4d6b1a0badd7058c2afdeb0d5e061cf4d11542c36587143a90cee8277b453c98223cdd73c0259b1e0a578756e7d8d09&line=0/" type='video/webm'>
              </video>
              <p>画布(每 30 毫秒,代码就会绘制视频的当前帧):</p>
              <canvas id="myCanvas" width="270" height="480" style="border:1px solid #9e2424;">
                Your browser does not support the HTML5 canvas tag.
              </canvas>
          </div>
    
          <script>
            var v=document.getElementById("video1");
            var c=document.getElementById("myCanvas");
            ctx=c.getContext('2d');
            v.addEventListener('play', function(){var i=window.setInterval(function(){ctx.drawImage(v,0,0,270,480)},30);},false);
            //此处的30即为每30毫秒在Canvas上绘制一次
            v.addEventListener('pause',function() {window.clearInterval(i);},false);
            v.addEventListener('ended',function() {clearInterval(i);},false);  
          </script>
        </body>
    </html>
    
    

    七、附

    附上其他博主的讲解(我觉得比我讲得好)

    展开全文
  • HTML5画布

    2020-09-27 20:59:07
    Canvas ...一个画布在网页中是一个矩形框,通过 元素来绘制. 注意: 默认情况下 元素没有边框和内容。 canvas简单实例如下: <canvas id="myCanvas" width="200" height="100"></canvas&g

    Canvas

    HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。
    标签只是图形容器,必须使用脚本来绘制图形。
    可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

    创建一个画布(Canvas)

    一个画布在网页中是一个矩形框,通过 元素来绘制.

    注意: 默认情况下 元素没有边框和内容。

    canvas简单实例如下:

    <canvas id="myCanvas" width="200" height="100"></canvas>
    

    注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
    可以在HTML页面中使用多个 元素.
    使用 style 属性来添加边框:

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    

    使用JavaScript来绘制图像

    canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
    

    实例解析:
    首先,找到 元素
    var c=document.getElementById(“myCanvas”);
    然后,创建 context 对象:
    var ctx=c.getContext(“2d”);
    下面的两行代码绘制一个红色的矩形:
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
    设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。
    fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

    注:

    getContext(“2d”) 对象是内建的 HTML5对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。getContext() 方法返回一个用于在画布上绘图的环境。

    语法

    Canvas.getContext(contextID)
    

    参数

    参数 contextID 指定了想要在画布上绘制的类型。当前唯一的合法值是"2d",它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API。

    提示:在未来,如果 标签扩展到支持 3D 绘图,getContext() 方法可能允许传递一个 “3d” 字符串参数。

    坐标

    canvas 是一个二维网格。
    canvas 的左上角坐标为 (0,0) 上面的 fillRect 方法拥有参数 (0,0,150,75)。
    意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。

    路径

    在Canvas上画线,我们将使用以下两种方法:

    moveTo(x,y) 定义线条开始坐标
    lineTo(x,y) 定义线条结束坐标

    绘制线条我们必须使用到 “ink” 的方法,就像stroke().

    实例
    定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:

    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0); 
    ctx.lineTo(200,100); 
    ctx.stroke();
     
    

    在canvas中绘制圆形, 我们将使用以下方法:

    arc(x,y,r,start,stop)
    

    画布的左上角坐标为0,0

    x:圆心在x轴上的坐标
    y:圆心在y轴上的坐标
    r:半径长度
    start:起始角度,以弧度表示,圆心平行的右端为0度
    stop:结束角度,以弧度表示

    注意:Math.PI表示180°,画圆的方向是顺时针
    实际上我们在绘制圆形时使用了 “ink” 的方法, 比如 stroke() 或者 fill().

    实例
    使用 arc() 方法 绘制一个圆:

    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(95,50,40,0,2*Math.PI); 
    ctx.stroke();
    

    文本

    使用 canvas 绘制文本,重要的属性和方法如下:

    font - 定义字体
    fillText(text,x,y) - 在 canvas 上绘制实心的文本
    strokeText(text,x,y) - 在 canvas 上绘制空心的文本

    使用 fillText():
    实例

    使用 “Arial” 字体在画布上绘制一个高 30px 的文字(实心):

    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.font="30px Arial"; 
    ctx.fillText("Hello World",10,50);
    

    使用 strokeText():
    实例

    使用 “Arial” 字体在画布上绘制一个高 30px 的文字(空心):

    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.font="30px Arial"; 
    ctx.strokeText("Hello World",10,50);
    
    展开全文
  • 画布

    2019-09-18 09:16:51
    画布 画布就是一个标签,没有绘图功能,有绘图功能的是图形上下文。 获取图形上下文 getContext() 绘制步骤 获取canvas对象 var canvas = document.getElementById(‘canvas’) 获取图形上下文 var context = canvas...

    画布
    画布就是一个标签,没有绘图功能,有绘图功能的是图形上下文。

    获取图形上下文
    getContext()

    绘制步骤
    获取canvas对象
    var canvas = document.getElementById(‘canvas’)
    获取图形上下文
    var context = canvas.getContext(‘2d’)
    设置绘图的样式
    context.fillStyle = ‘red’ 填充色
    context.strokeStyle = ‘pink’ 边框色
    设置线宽
    context.lineWidth=5
    绘制图形
    context.fillRect() 填充矩形
    context.strokeRect() 边框矩形

    矩形
    fillRect(起点的x轴坐标,起点的y轴坐标,矩形的宽度,矩形的高度)
    strokeRect(起点的x轴坐标,起点的y轴坐标,矩形的宽度,矩形的高度)
    clearRect(起点的x轴坐标,起点的y轴坐标,矩形的宽度,矩形的高度)

    //矩形
    		window.onload=function(){
    			//获取画布节点
    			var canvas=document.getElementById("canvas");
    			//获取上下文
    			var context=canvas.getContext("2d");
    			//设置样式
    			context.fillStyle='red';
    			// context.fillStyle='green';
    			//设置线宽
    			context.linewidth=5;
    			//绘制图形,参数:x坐标,y坐标,矩形的宽度,矩形的高度
    			context.fillRect(0,0,50,60);
    			context.fillRect(200,200,50,50);
    
    		}
    

    圆形
    创建路径
    context.beginPath()

    设置路径
    context.arc(圆心的x轴,圆心的y轴,半径,开始的角度,结束的角度,顺时针false/逆时针true)
    Math.PI 180度

    关闭路径
    context.closePath()
    设置样式
    context.fillStyle = ‘red’
    context.strokeStyle = ‘pink’
    绘制圆形
    context.fill()实心圆
    context.stroke()空心圆

    
    	//圆
    		window.onload=function(){
    			//获取画布节点
    			var canvas=document.getElementById("canvas");
    			//获取上下文
    			var context=canvas.getContext("2d");
    			//设置开始路径
    			context.beginPath();
    			//设置圆的路径,参数:圆心的x轴,圆心的y轴,半径,开始的角度,结束的角度,绘制方向,顺时针false/逆时针true
    			context.arc(200,200,100,0,Math.PI*2,false);
    			//闭合路径
    			context.closePath();
    			//绘制的样式
    			context.fillStyle='pink';
    			context.strokeStyle='coral';
    			context.lineWidth=10;
    			//实心圆
    			//context.fill();
    			//空心圆
    			context.stroke();		
    		}
    

    直线
    开始路径
    context.beginPath()
    直线的开始位置
    context.moveTo(起点的x轴坐标,起点的y坐标)
    直线的结束位置
    context.lineTo(终点的x轴坐标,终点的y坐标)
    结束路径
    context.closePath()
    设置样式
    绘制
    context.fill()
    context.stroke()

    
    	//直线
    	window.onload=function(){
    		//获取画布节点
    		var canvas=document.getElementById("canvas");
    		//获取上下文
    		var context=canvas.getContext("2d");
    		//设置开始路径
    		context.beginPath();
    		//设置起点 ,参数:起点横坐标,起点纵坐标
    		context.moveTo(100,100);
    		//设置直线重点位置
    		context.lineTo(300,300);
    		context.strokeStyle="green";
    		context.stroke();
    	}
    	
    

    折线

    
    	//折线
    	window.onload=function(){
    		//获取画布节点
    		var canvas=document.getElementById("canvas");
    		//获取上下文
    		var context=canvas.getContext("2d");
    		//设置开始路径
    		context.beginPath();
    		//设置起点 ,参数:起点横坐标,起点纵坐标
    		context.moveTo(0,300);
    		context.lineTo(150,100);
    		context.moveTo(150,100);
    		context.lineTo(250,300);
    		context.moveTo(250,300);
    		//设置直线重点位置
    		context.lineTo(400,200);
    		context.strokeStyle="green";
    		context.stroke();
    	}	
    

    曲线
    开始路径
    context.benginPath()
    开始的位置
    context.moveTo(x,y)
    控制点
    两个控制点的:
    context.bezierCurveTo(第一个控制点的x轴位置,第一个控制点的y轴位置,第二个控制点的x轴位置,第二个控制点的y轴位置y,结束点x轴,结束点的y轴)
    如果想要上面的曲线更弯曲,就把x轴变大,y轴变小
    如果想要下面的曲线更弯曲,就把x轴变小,y轴变大

    一个控制点的:
    context.quadraticCurveTo(控制点的x轴,控制点的y轴,结束点的x轴,结束点的y轴)
    闭合
    context.closePath()
    绘制
    context.stroke()
    context.fill()
    默认颜色是黑色
    线宽是1

    //曲线
    	window.onload=function(){
    		//获取画布节点
    		var canvas=document.getElementById("canvas");
    		//获取上下文
    		var context=canvas.getContext("2d");
    		//设置开始路径
    		context.beginPath();
    		//设置起点 ,参数:起点横坐标,起点纵坐标
    		context.moveTo(0,400);
    		//context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
    		//context.bezierCurveTo(180,20,250,390,400,400)
    		//设置直线重点位置
    		context.quadraticCurveTo(200,370,200,200);
    		context.moveTo(400,0);
    		context.quadraticCurveTo(200,30,200,200);
    		context.moveTo(0,0);
    		context.quadraticCurveTo(200,30,200,200);
    		context.moveTo(400,400);
    		context.quadraticCurveTo(200,370,200,200);
    		context.strokeStyle="green";
    		context.fillStyle='red';
    		//context.closePath();
    		context.stroke();
    	}	
    

    渐变
    线性渐变:
    创建一个渐变的对象
    var gradient = context.createLinearGradient(起始点x坐标,起始点y坐标,结束点x坐标,结束点y坐标)

    添加渐变的颜色
    gradient.addColorStop(偏移量【0-1】,‘color’)

    设置填充渐变
    context.fillStyle = gradient
    使用渐变绘制矩形
    context.fillRect(0,0,400,400)

    //线性渐变
    	window.onload=function(){
    		//获取画布节点
    		var canvas=document.getElementById("canvas");
    		//获取上下文
    		var context=canvas.getContext("2d");
    		//创建渐变对象  起始横坐标 ,起始纵坐标 ,结束点横坐标  ,结束的纵坐标
    		var gradient=context.createLinearGradient(0,0,400,400);
    		//添加渐变的颜色 参数:偏移量,颜色
    		gradient.addColorStop(0,'blue');
    		gradient.addColorStop(0.5,'pink');
    
    		gradient.addColorStop(0.9,'white');
    		//设置渐变样式
    		context.fillStyle=gradient;
    		//绘制
    		context.fillRect(0,0,400,400);
    	}	
    

    径向渐变
    创建一个渐变的对象
    var gradient = context.createRadialGradient(起始圆的圆心x坐标,y坐标,半径,结束圆的圆心x坐标,y坐标,半径)

    添加渐变的颜色
    gradient.addColorStop(偏移量【0-1】,‘color’)

    设置填充渐变
    context.fillStyle = gradient

    使用渐变绘制矩形
    context.fillRect(0,0,400,400)

    //径向渐变
    	window.onload=function(){
    		//获取画布节点
    		var canvas=document.getElementById("canvas");
    		//获取上下文
    		var context=canvas.getContext("2d");
    		//创建渐变对象  起始横坐标 ,起始纵坐标 
    		var gradient=context.createRadialGradient(200,200,50,200,200,200,150);
    		//添加渐变的颜色 参数:偏移量,颜色
    		gradient.addColorStop(0,'blue');
    		gradient.addColorStop(0.5,'white');
    
    		gradient.addColorStop(1,'pink');
    		//设置渐变样式
    		context.fillStyle=gradient;
    		//绘制
    		context.fillRect(0,0,400,400);
    	}	
    

    变形
    平移
    context.translate(平移的距离,平移的距离)
    缩放
    context.scale(缩放的备数,缩放的备数)
    旋转
    context.rotate(角度)

    //变形
    	window.onload=function(){
    		//获取画布节点
    		var canvas=document.getElementById("canvas");
    		//获取上下文
    		var context=canvas.getContext("2d");
    		context.fillStyle='red';
    		//平移  参数:原点平移的位置
    		//context.translate(100,100);
    
    		//缩放 参数:缩放的倍数
    		context.scale(0.5,0.5);
    
    		//旋转  参数:旋转的角度
    		context.rotate(Math.PI/4);
    		context.fillRect(0,0,200,200);
    	}	
    

    注意:所有的变形都是针对,坐标轴,与绘制的矩形无关

    展开全文
  • HTML 画布

    2018-05-09 15:29:51
    颜色、样式和阴影   属性 描述 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。 strokeStyle 设置或返回用于笔触的颜色、渐变或模式。... 设置或返回用于阴影的颜色。... sha...
  • HTML5 保存画布

    2018-04-25 22:00:37
    保存画布好不容易在画布中绘制出酷炫的图形,应该把它保存起来吧。但不幸的是,画布中的这些图形本身不是真正的图片,不能直接保存。不幸中的万幸,Canvas API提供了toDataURL()方法,可以把画布中的图形转换为图片...
  • H5的canvas画布使用

    千次阅读 2017-08-14 22:46:54
    H5的canvas canvas画布 canvas上绘制图形 canvas给绘制的图形设置样式 canvas中绘制图像 canvas中的变形 canvas标签
  • 商业画布

    千次阅读 2019-09-03 10:54:22
    什么是商业画布商业模式画布指一种能够帮助团队催生创意、降低猜测、确保他们找对了目标用户、合理解决问题的工具。商业模式画布使得商业模式可视化,使用统一的语言讨论不同商业领域。商业模式画布不仅能够提供更多...
  • 商业模式画布

    万次阅读 2018-07-22 18:52:11
    周四周五机缘巧合参加了一场关于商业模式画布的培训,第一次参加趋向于商业方向的培训,一开始并没有抱太大的期望。但是听完两天的课之后,第一次给培训的老师全是满分的评价,因为确实内容非常受用,两天的课程中即...
  • Android canvas 画布详细讲解

    千次阅读 2019-07-22 19:20:10
    文章目录1、简介2、常用的绘画方法 draw* ...比较清楚详细的讲解画布的一些基础方法,一些参数的含义,让读者能够更清楚地使用 canvas 绘制想要的图形。 2、常用的绘画方法 draw* 待续····· ...
  • JavaScript之Canvas画布

    万次阅读 多人点赞 2017-04-18 23:10:18
    HTML5有个强大的功能,就是利用canvas进行画图。
  • 商业画布模板

    2017-06-14 12:48:01
    商业画布模板
  • html5 画布例子

    2017-02-06 20:49:43
    html5 canvas画布例子,一个连线的游戏
  • HTML5 canvas画布(四)

    千次阅读 2016-06-25 18:03:18
    arcTo用法用法:arcTo(x1, y1, x2, y2, radius) 说明:arcTo()方法将利用当前端点、端点1(x1,y1)和端点2(x2,y2)这三个点所形成的夹角,然后绘制一段与夹角的两边相切并且半径为radius的圆上的弧线。...
  • 【微信小程序】之画布

    千次阅读 2019-04-25 17:32:10
    同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作 属性名 类型 默认值 说明 canvas-id String canvas组件的唯一标识符 disable-...
  • android开发 之 Canvas之画布操作

    千次阅读 2017-08-02 16:47:06
    一.Canvas的常用操作速查表 操作类型 ... 使用单一颜色填充整个画布 绘制基本形状 drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRect, drawOval, drawCircle, draw...
  • 价值主张画布

    千次阅读 2019-06-25 19:18:50
    一、价值主张画布概况 首先,什么是价值主张? 价值主张是整个商业模式的核心,它描述了产品提供的价值和顾客需求之间如何建立联系以及为什么顾客要去买你的产品。 而价值主张画布是在《价值主张设计》一书中,由...
  • 精益创业《精益创业》是一本书,主要讲解创业、创新和产品的理念和方法论,它把创业上升到了理论层面,更加科学化和系统化。精益创业提到的三个主要工具是:“最小可用品”、“客户反馈”、“快速迭代”。...
  • 自定义控件---图层,画布和canvas

    千次阅读 2017-11-09 14:34:20
     每一次调用canvas.drawXXX系列函数时,都会生成一个新的透明图层来专门来画这个图形,然后按照绘制的顺序覆盖到画布上。调用完方法就覆盖到画布上了。如果我们连续调用五个draw函数,那么就会生成五个透明图层,画...
1 2 3 4 5 ... 20
收藏数 108,922
精华内容 43,568
关键字:

画布