js中canvas操作

最新推荐文章于 2024-08-07 05:09:36 发布

Zero_Error

最新推荐文章于 2024-08-07 05:09:36 发布

阅读量5k

点赞数 1

分类专栏： JavaScript高级程序设计(第三版)-重读文章标签： js javascript canvas 绘图

本文链接：https://blog.csdn.net/ruler1112/article/details/76790644

版权

本文介绍了JavaScript中canvas元素的基本操作，包括如何设置绘图区域、获取2D绘图上下文，以及各种绘图函数，如绘制矩形、路径、文本、图像，渐变和阴影效果。还涉及到图像数据的获取与编辑以及合成方式的设定。

摘要由CSDN通过智能技术生成

*  1.canvas元素是HTML5元素ie9+支持
*  2.使用canvas绘图需要指定绘图区域大小,canvas有width和height属性,
*  不要使用css来指定大小
*  3.绘图操作方案:
*    1.获取canvas元素:var draw=document.getElementById("drawingArea");
*    2.获取2d上下文:var context=draw.getContext("2d");
*    3.开始绘图
*  4.canvas可以导出图像:
*      var imgUrl=draw.toDataUrl("image/png") (参数是图像的MIME类型)
*      使用图像:
*          var img=document.createElement("img");
*          img.src=imgUrl;
*          将img添加到文档流
*  5.绘图函数:
*      1.设置画笔颜色:
*          context.fillStyle="red":填充的时候的画笔颜色
*          context.strokeStyle="red":描边的时候画笔颜色
*      2.绘制图形:
*          (在使用描边的方法stroke类的方法的时候可以设置线条的宽度,末端形状,线条相交方式
*             lineWidth:设置线条宽度
*             lineCap:设置末端形状("butt:平头","round:圆头","square:方头")),只有在画线的时候能看出来
*             lineJoin:设置线条相交方式("round:圆交","bevel:斜交","miter:斜接")(我没看出什么区别)
*          1.