canvas总结

最新推荐文章于 2022-09-08 17:51:30 发布

yaxi_yaxi_yaxi

最新推荐文章于 2022-09-08 17:51:30 发布

阅读量238

点赞数

分类专栏： css 文章标签： canvas基本用法1

本文链接：https://blog.youkuaiyun.com/qq_35176916/article/details/86502508

版权

css 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何使用HTML5的Canvas元素进行绘图，包括绘制三角形、矩形、曲线及设置透明度等技巧。掌握基本绘图函数如moveTo、lineTo、fillRect、strokeRect、arc和bezierCurveTo，以及样式设置如fillStyle、strokeStyle和globalAlpha。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas 绘图

1：需要在div中做如下声明，注意宽高也要写于里面

 <canvas id="drawingCanvas" width="500" height="300"></canvas>

2:js中执行如下代码

 var canvas = document.getElementById('drawingCanvas');
    var context = canvas.getContext('2d');  //获取绘图工具
    context.moveTo(250,50);     //绘图开始坐标
    context.lineTo(50,250)      // 从（250,50）=>（50,250）
    context.lineTo(450,250)     // 从（50,250）=>（450,250）
    context.lineTo(250,50);   //这一条省略一样可以绘制出三角
    //context.lineJoin    设置交点的形状   默认 mitre(锐角斜接)  round(圆头)  bevel(平头斜接)
   
    context.closePath();  //如果知道最后会关闭路径，就不必再绘制封闭线

contex.closePath是封闭路径的作用，上述代码我绘制的是一个三角，因为三角会封闭，所以当执行context.closePath()方法，context.lineTo(250,50)就没必要执行了，也会生成封闭三角。

3：填充三角内部颜色

  context.fillStyle='blue';   //下面两步统称填充内部，  我们需要将填充放于轮廓上面，不然填充会覆 盖轮廓边。
    context.fill();

:4：勾画轮廓

 context.lineWidth=2;        //下面四步统称绘制轮廓，
    context.strokeStyle ='red';
    context.lineCap ='round'
    context.stroke();

注意：当要填充颜色时，轮廓步骤一定要放于填充步骤之后，不然填充的颜色会覆盖轮廓边框。

完整代码：

  <style>
    canvas {border: 1px dashed black}
    </style>
</head>
<body>
   <canvas id="drawingCanvas" width="500" height="300"></canvas>
   <script type="text/javascript">
 window.onload=function(){
    var canvas = document.getElementById('drawingCanvas');
    var context = canvas.getContext('2d');
    context.moveTo(250,50);
    context.lineTo(50,250)
    context.lineTo(450,250)
    // context.lineTo(250,50);   //这一条省略一样可以绘制出三角
    //context.lineJoin    设置交点的形状   默认 mitre(锐角斜接)  round(圆头)  bevel(平头斜接)
   
    context.closePath();  //如果制动啊最后会关闭路径，就不必再绘制封闭线
    context.fillStyle='blue';   //下面两步统称填充内部，  我们需要将填充放于轮廓上面，不然填充会覆盖轮廓边。
    context.fill();
    context.lineWidth=2;        //下面四步统称绘制轮廓，
    context.strokeStyle ='red';
    context.lineCap ='round'
    context.stroke();
    //直接通过 filRect(0,10,200,300) 绘制在（0，10）处的200x300的矩形
    //通过strokeRect(0,10,200,200)直接绘边
 }

   </script>
</body>

绘制矩形：

//直接通过 filRect(0,10,200,300) 绘制在（0，10）处的200x300的矩形
    //通过strokeRect(0,10,200,200)直接绘边

绘制曲线：

1：绘制简单圆弧：使用arc()函数，该函数不能绘制矩形

 var canvas = document.getElementById('drawingCanvas');
    var context = canvas.getContext('2d');
    //创建绘制圆弧所需变量
    var  centerX = 150;   //圆心 x坐标
    var centerY = 300;    //圆心 y坐标
    var radius = 100;     //半径
    var startAngle = 1.25*Math.PI;  //圆弧开始弧度
    var endAngle =1.75* Math.PI;      //圆弧结束弧度
    //根据变量绘制圆弧
    context.arc(centerX,centerY,radius,startAngle,endAngle);
    context.stroke();

2：绘制较复杂的曲线:使用bezierCurveTo（）函数：

首先要明白贝塞尔曲线：

完成代码如下：

 var context = canvas.getContext('2d');
   context.moveTo(62,242);  //起点
   //创建表示两个控制点和终点的变量
   var control1_x = 187;
   var  control1_y = 32;
   var control2_x = 429;
   var control2_y = 480;
   var endPointX = 365;
   var endPointY = 133;
   //绘制曲线
   context.bezierCurveTo(control1_x,control1_y,control2_x,control2_y,endPointX,endPointY);
   context.stroke();

canvas设置透明度的方法：

context.fillStyle="rgba(100,150,185,0.5)"  //canvas设置透明度的方法
context.globalAlpha = 0.5  //也是设置透明度的一种方式

canvas图片合成方式：

contex.globalCompositeOperation = "xor" //设置canvas的合成方式，只要在画后面的图形之前设置该属性就可以了。