canvas基础知识点（一）

ephererid 发布于2019-08-01 18:30 / 1009人阅读

摘要：给设置宽高标签的宽高默认是是一个行内块元素可以在标签上通过，来设置可以在中给对象设置注意不要通过来调整的宽高导致内部的画布被拉伸，图形变形获取画笔工具绘图都是通过标签的画笔来进行的注意，不要写成，里面传入的参数目前也只有这一种情况描边和填充

给canvas设置宽高：
canvas标签的宽高默认是300*150,是一个行内块元素
可以在canvas标签上通过width，height来设置
可以在js中给dom对象设置：

  mycanvas.width = 500
  mycanvas.height = 500

注意：不要通过css来调整canvas的宽高,导致内部的canvas画布被拉伸，图形变形

获取画笔工具：
canvas绘图都是通过canvas标签的画笔来进行的

var ctx = canvas.getContext("2d")

注意，不要写成getContent，里面传入的参数目前也只有2d这一种情况

3、描边和填充

canvas绘制图形都是绘制的路径，看不见摸不着的一种东西，需要进行描边或填充之后才能看到真正的图形
如果绘制图形的路径在绘制完成后没有闭合，继续绘制路径的时候会首尾相连
在填充的时候如果路径依然没有闭合，会将路径的闭合区域填充

ctx.fill()//填充
ctx.stroke()//描边

可以调整ctx.strokeStyle,ctx.fillStyle属性来更改填充，描边的颜色，值为颜色值（rgb,rgba,word,16进制）

绘制矩形
ctx.rect(x,y,w,h)
canvas的坐标系起点是左上角，x轴向右正方向，y轴向下正方向
x,y代表的是矩形起点（左上角）的位置，w,h就是宽高
可以使用strokeRect,fillRect方法直接绘制一个填充、描边的矩形

清楚矩形区域以及动画原理
ctx.clearRect(x,y,w,h)可以清除某一个矩形区域的图形
canvas实现动画的原理就是不断的绘制和擦除来实现

   var ctx = canvas.getContext("2d")
   let x=0,y=0;
   ctx.fillRect(x,y,50,50)    
   setInterval(function () {
       //绘制新的图形前擦掉之前的
       ctx.clearRect(0,0,canvas.width,canvas.height)
       x++;y++;
       //不断绘制新图形
       ctx.fillRect(x,y,50,50)
   },30)

GPU云服务器云服务器基础知识点小结 PHP基础知识点基础知识入门基础知识

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51775.html

Canvas基础知识(一)

摘要：是新增的标签，是个图形容器。允许在其区域内进行绘制。其它大小由和决定。的创建标签只有和两个属性，在没有设置它们的情况下，默认大小为。只有一个参数，就是上下文的格式。下面的代码用于检测浏览器的是否支持支持不支持 canvas是Html5新增的标签，是个图形容器。允许JavaScript在其区域内进行绘制。其它大小由width和height决定。 canvas的创建 ;canvas标签只有...

miya 2019-08-22 15:35 评论0 收藏0
canvas基础知识

摘要：一基础知识基础知识代码示例获取元素获取画图环境，指明为基础知识线条线条宽度绘制出轮廓圆形填充路径填充颜色描边绘制文字绘制文字绘制描边文字清除二高级功能保存和恢复绘图状态代码示例保存状态保存状态恢复状态你可以用栈的概览去理解保存和恢复绘图的状一、canvas 基础知识： 1、基础知识代码示例 var canvas = document.getElementById(canvas), ...

Dean 2019-08-20 17:17 评论0 收藏0
关于前端上传文件全面基础扫盲贴(六) ----- 图片上传,旋转,重绘,预览等实战(附DEMO)

摘要：二编辑合成照片使用编辑压缩重设尺寸比例转成输出预览。三保存并上传照片提交数据到服务器需要服务器支持我跳过了。数据主要来自拍摄的照片，多用于移动端开发，端也会用到，此插件兼容主流浏览器，以下不支持。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端...

lmxdawn 2019-08-26 10:31 评论0 收藏0