Canvas

Canvas绘图- JavaScript 来绘制图像
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">�</canvas>

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

strokeRect()

定义和用法:strokeRect() 方法绘制矩形(不填色)。笔触的默认颜色是黑色。
JavaScript语法: context.strokeRect(x,y,width,height);

fillRect()

定义和用法:fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
格式和strokeRect一样。

clearRect()

定义和用法:clearRect() 方法清空给定矩形内的指定像素。
JavaScript 语法:context.clearRect(x,y,width,height);

fillStyle 属性

定义和用法:fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
JavaScript 语法: context.fillStyle=color|gradient|pattern;
#######strokeStyle 属性
定义和用法:strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

Canvas 路径

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
beginPath(): 开始一条路径
closePath():创建从当前点到开始点的路径。

圆-->arc()

arc() 方法创建弧/曲线(用于创建圆或部分圆)。
JavaScript 语法:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 10,192评论 2 32
  • 书中代码示例效果展示:Core HTML5 Canvas Examples 基础知识 canvas元素 canva...
    szu_bee阅读 7,975评论 2 28
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 9,365评论 3 40
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    J_L_L阅读 5,473评论 0 4
  • 我们相爱,所以牵手,但如果两个人步调不一致,一人目标既定大步流星,一人闲散随意走马观花,过不了多久原本牵着的双手也...
    劝课农桑阅读 5,307评论 0 2

友情链接更多精彩内容