浅谈Canvas

xfee 发布于2019-08-30 13:17 / 2000人阅读

摘要：上一篇给大家讲了一下的一些概念性的东西，这一篇我们来讲一下的最基础的应用定义一个画图画路径和表示的是里面的绘制路径，不加的话会出现灵异事件灵异事件通俗的讲就是后绘制的图形不能精确的识别上一线的开始处这个用来定义线段终点的类型定义线段的连接类

上一篇给大家讲了一下canvas的一些概念性的东西，这一篇我们来讲一下canvas的最基础的应用：

定义一个canvas：

var ctx =document.getElementById_x("canvas").getContext("2d");

（1）画图

ctx.fillStyle="rgba(255,255,255,0.5)";

ctx.fillRect(0,0,100,100)

（2）画路径
beginPath()和closePath()表示的是canvas里面的绘制路径，不加的话会出现灵异事件,灵异事件通俗的讲就是后绘制的图形不能精确的识别上一线的开始处;

  ctx.beginPath();
  ctx.fillStyle="#f00";
  ctx.moveTo(10,10);
  ctx.lineTo(100,100);
  ctx.lineTo(100,150);
  ctx.lineWidth=10;
  ctx.lineCap="round";   //这个用来定义线段终点的类型
  ctx.linejoin="round";    // 定义线段的连接类型
  ctx.stroke();
  ctx.closePath();

（3）画圆

里面传6个参数,分别是起始坐标，半径，开始弧度，结束弧度，旋转方向;

ctx.beginPath();
ctx.arc(50,50,50,0,Math.PI,true);
ctx.fill();
ctx.fillStyle="#00f";
ctx.closePath();

（4）渐变

在canvas中我们可以用createLinearGradient() 和createRadialGradient
() 来进行渐变的设置

放射性渐变
（5）阴影

  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "rgba(0,0,0,0.5)";
  ctx.font = "20px Times New Roman";   //文字
  ctx.fillStyle = "black";            //文字填充颜色
  ctx.fillText("Hello World",5,30)  //在画布上绘制填充颜色的文字

fillText是指在画布上绘制文本；fillText(text,x,y,maxWidth)；

text -- 画布上输出文本；

x -- 相对于画布的X坐标

y -- 相对于画布的Y坐标

maxWidth -- 允许的最大文本宽度（可选参数）

GPU云服务器云服务器设计浅谈浅谈javascript 浅谈sdwan解决方案浅谈正则表达式

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

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

浅谈Canvas

摘要：上一篇给大家讲了一下的一些概念性的东西，这一篇我们来讲一下的最基础的应用定义一个画图画路径和表示的是里面的绘制路径，不加的话会出现灵异事件灵异事件通俗的讲就是后绘制的图形不能精确的识别上一线的开始处这个用来定义线段终点的类型定义线段的连接类上一篇给大家讲了一下canvas的一些概念性的东西，这一篇我们来讲一下canvas的最基础的应用：定义一个canvas： var ctx =...

cppowboy 2019-08-21 11:22 评论0 收藏0
浅谈 Web App 动画效率

摘要：动画才是我们今天要谈论的主要内容如何做到。所以在做动画的时候，不要用做计算密集型的任务，返回的对象做好缓存，避免多次调用。所以开发小组就将和合二为一，利用的排版优势和的渲染优势。在其上层再加入一层，用来显示渲染的结果。自从 HTML5 诞生之后，关于 Web App 和 Native App 的讨论就从未间断过，孰优孰劣大家各执一词。但作为前端开发者的我们，心里其实是明白的，这个世界...

shusen 2019-08-21 10:27 评论0 收藏0