文章目录

  • 基本的画布功能
  • stroke() 绘制已定义的路径
  • 2D绘图上下文
  • 颜色、样式和阴影
  • strokeStyle:描边
  • fillStyle: 设置或返回用于填充绘画的颜色、渐变或模式
  • fill() ：填色绘制
  • shadowColor 设置或返回用于阴影的颜色
  • shadowBlur 设置或返回用于阴影的模糊级别
  • shadowOffsetX 设置或返回阴影距形状的水平距离
  • shadowOffsetY 设置或返回阴影距形状的垂直距离
  • 变换
  • translate( x , y ):变换原点，用save(),和restore（）保存原有原点，并恢复
  • rotate( angle ) ：围绕圆点进行旋转angle弧度,正值表示顺时针方向旋转，负值表示逆时针方向旋转
  • 矩形
  • fillStyle : 颜色属性。这个属性要写在fillRect()方法之前
  • fillRect()：绘制矩形，单位像素，默认实心黑色
  • lineWidth:描边宽度属性，任意数值
  • strokeRect(): 绘制矩形（无填充）
  • clearRect():可以擦除画布中的某个区域，变得透明。
  • 路径
  • moveTo( x , y ):不绘制线条，只把绘制起点移动到（ x , y ）
  • closePath() 创建从当前点回到起始点的路径
  • lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
  • arc()：用来绘制圆弧
  • arcTo():创建两切线之间的弧/曲线
  • 文本
  • fillText()

基本的画布功能

不要在style里面设置width和height(可能会出现位置坐标不准的问题)，直接设置canvas的属性就好，不用设定 canvas也有默认的宽和高

<canvas id="drawing" width="300" height="150" style="border:1px solid #d3d3d3;">
</canvas>

要想在画布上绘制图形，首先要获取绘图上下文。使用getContext（）方法可以获取绘图上下文的引用。对于平面图形，传入2d即可。

let drawing = document.getElementById('drawing')
    if(drawing.getContext){
       let context = drawing.getContext('2d')
    }

多个图操作，用beginPath() 和closePath() 形成一个封闭的区块

let drawing = document.getElementById('drawing');
        if (drawing.getContext) {
            let context = drawing.getContext('2d');
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(500, 500);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(500, 0);
            context.lineTo(0, 500);
            context.closePath();
            //绘制
            context.stroke();
            
        }

stroke() 绘制已定义的路径

2D绘图上下文

原点为canvas图像左上角（0，0）

颜色、样式和阴影

strokeStyle:描边

fillStyle: 设置或返回用于填充绘画的颜色、渐变或模式

fill() ：填色绘制

if (drawing.getContext) {
            let context = drawing.getContext('2d');
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(500, 500);
            context.lineTo(500, 0);
            context.lineTo(0, 0);
            context.strokeStyle = 'blue	'
            context.fillStyle = 'red'
            context.fill()
            context.stroke();
            
        }

shadowColor 设置或返回用于阴影的颜色

shadowBlur 设置或返回用于阴影的模糊级别

shadowOffsetX 设置或返回阴影距形状的水平距离

shadowOffsetY 设置或返回阴影距形状的垂直距离

变换

translate( x , y ):变换原点，用save(),和restore（）保存原有原点，并恢复

rotate( angle ) ：围绕圆点进行旋转angle弧度,正值表示顺时针方向旋转，负值表示逆时针方向旋转

ctx.beginPath();
            ctx.save()
            ctx.translate(100,100)
            ctx.rotate(30)
            ctx.fillStyle="red"
            ctx.fillRect(0,0,100,200);
            ctx.closePath();
            ctx.restore()
            ctx.stroke();

提示：如需把角度转换为弧度，请乘以 Math.PI 并除以 180

矩形

fillStyle : 颜色属性。这个属性要写在fillRect()方法之前

fillRect()：绘制矩形，单位像素，默认实心黑色

x坐标，y坐标 ，宽度，长度

context.beginPath(); 
            context.fillStyle = 'rgba(0,0,255,0.5)'
            context.fillRect(10,20,100,100,)
            context.stroke();
            context.beginPath();

lineWidth:描边宽度属性，任意数值

strokeRect(): 绘制矩形（无填充）

给它填充颜色是没有用的，只是边框

context.beginPath();
            context.strokeRect(200,200,100,100)
            context.closePath();
            //绘制
            context.stroke();

clearRect():可以擦除画布中的某个区域，变得透明。

context.beginPath();
            context.clearRect(200,200,100,100)
            context.closePath();
            //绘制
            context.stroke();

路径

moveTo( x , y ):不绘制线条，只把绘制起点移动到（ x , y ）

closePath() 创建从当前点回到起始点的路径

lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条

例：

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
//描画路径，如果下面有更改描述，则需再次执行stroke()或者在stroke()执行之前进行描述
ctx.stroke();

</script>

arc()：用来绘制圆弧

x , y , radius , startAngle , endAngle , counterclockwise( 表示是否逆时针，默认逆时针（true）)

context.beginPath();
 context.arc(0,0,100,0,90,false)
 context.closePath();
  //绘制
 context.stroke();

arcTo():创建两切线之间的弧/曲线

需要一个起点，端点一p1，端点二p2
p1.x , p1.y , p2.x , p2.y ,radius

//指定绘制路径的起始点
    ctx.moveTo(50, 50);
    //绘制一条到坐标(150,50)的水平直线
    ctx.lineTo(150, 50);
    
    //坐标点(150,50)就是绘制弧线时的当前端点
    
    //端点1
    var p1 = {
    	x : 200,
    	y : 50
    };
    //端点2
    var p2 = {
    	x : 200,
    	y : 100    		
    };
    //绘制与当前端点、端点1、端点2三个点所形成的夹角的两边相切并且半径为50px的圆的一段弧线
    ctx.arcTo(p1.x, p1.y, p2.x, p2.y, 50);
    
    //设置线条颜色为蓝色
    ctx.strokeStyle = "blue";
    //按照上述绘制路径绘制弧线
    ctx.stroke();

javascript 画图框架 canvas js 绘图框架_2d

由于在使用arcTo()绘制弧线时，“画笔”所在的端点为(150,50)，所以坐标点(150,50)就是当前端点，接着我们在arcTo()方法的参数中指定了端点1(200,50)和端点2(200,100)，因此arcTo()将绘制出与这三个端点所形成的夹角的两边相切、并且半径为50px的圆上的一段弧线。此外，夹角两边与圆相切的两个切点，将圆分成了两段圆弧，一段就是上图绘制出来的1/4圆弧，一段则是剩下的3/4圆弧，由于arcTo()将会沿着最短圆弧的方向绘制弧线，所以绘制出来的弧线就是较短的1/4圆弧（原文地址：原文）

bezierCurveTo(c1x , c1y , c2x , c2y , x , y) ：以( cx , cy )为控制点，绘制一条从上一点到（ x , y ）的弧线（三次贝塞尔曲线）

javascript 画图框架 canvas js 绘图框架_动画_02

文本

fillText()

在画布上绘制“被填充的”文本

ctx.fillText('hello world',100,100);