美文网首页
canvas学习

canvas学习

作者: 田野的海螺 | 来源:发表于2018-12-27 15:56 被阅读0次

1.创建画布:

<canvas id="myCanvas" width="500" height="550" style={{ border: '1px solid #ddd' }}> 您的浏览器不支持 HTML5 canvas 标签。 </canvas>

创建canvas元素

2.画线条

const canvas = document.getElementById("myCanvas");////获得画布元素

    if (canvas.getContext) {

      const ctx = canvas.getContext("2d");//获得2维绘图的上下文2d: 表示2维experimental-webgl: 表示试验版3维 webgl:表示3维

      ctx.lineWidth = 10;//设置线宽

      ctx.strokeStyle = "red"; //设置线的颜色

      ctx.moveTo(100, 100);//起点

      ctx.lineTo(300, 300);//终点

      ctx.moveTo(0, 100);

      ctx.lineTo(100, 0);

      ctx.stroke(); //执行画线

    }

图示:

直线图

3.写文字

const ctx = canvas.getContext("2d");//获得2维绘图的上下文2d: 表示2维experimental-webgl: 表示试验版3维 webgl:表示3维

      //设置线宽

      ctx.lineWidth = 1;

      //设置线的颜色

      ctx.strokeStyle = "red";

      ctx.moveTo(0, 0);

      ctx.strokeRect(0, 0, 600, 600);

      ctx.font = "50px microsoft yahei";

      ctx.strokeText("你好,我是懒懒", 20, 100);//描边文字

      //填充

      ctx.fillStyle =ctx.fillText("你好,我是懒懒", 20, 200);//填充文字

context.fillText(text,x,y,[maxWidth])

text表示需要绘制的文字,x,y分别表示绘制在canvas上的横,纵坐标,最后一个参数可选,表示显示文字的最大宽度,防止文字显示溢出。

4,画三角形

const ctx = canvas.getContext("2d");//获得2维绘图的上下文2d: 表示2维experimental-webgl: 表示试验版3维 webgl:表示3维

      ctx.beginPath();  //清空子路径,一般用于开始路径的创建

      ctx.strokeStyle = "red";

      ctx.moveTo(300,300);

      ctx.lineTo(100,100);  //画线到0,300的位置

      ctx.lineTo(200,400);  //画线到右下角

      ctx.closePath();  //闭合

      //ctx.stroke();  //执行描边

      ctx.fillStyle="red";  //设置填充颜色

      ctx.fill();  //执行填充

4,画矩形

ctx.fillRect(x, y, width, height);//ctx.fillRect(10, 10, 250, 70);

相关文章

  • Android 自定义View(学习 整理基础用法)

    学习资料 始于 onDraw(Canvas canvas) 1、canvas.drawXxx() 直接绘制所需图形...

  • canvas

    学习canvas

  • canvas基础学习笔记

    学习目标 1.canvas画线 2.canvas画矩形 3.canvas写字 4.canvas画圆 5.canva...

  • canvas(二)绘制图形

    使用canvas 绘制图形 上一篇 canvas基本用法在学习了canvas基本用法 我们开始着手在 canvas...

  • HTML5-----Canvas 学习日记1

    HTML5-----Canvas 学习日记1 1:我们经常提到canvas,其实canvas是HTML中一个元素,...

  • 三、Canvas基本绘图

    Canvas绘图(二) 本章将学习Canvas绘图的以下技巧 裁剪区域 图象合成 简单的Canvas变换 一、设置...

  • NFH.005 - Canvas渐变与绘制

    12.15学习经验分享# Bruce_Zhu于2016.12.15 一、Canvas - 渐变 canvas 画图...

  • canvas入门

    日期:2020 年 5 月 8 日 canvas 学习笔记 canvas 简介 canvas 是一个用来绘图的 h...

  • canvas学习

    canvas....学前端的看到这个标签就会有一种高大上的感觉,因为这个标签出来的时候,项目大部分时候用于复杂交互...

  • canvas学习

    标签: cancas canvas是什么? HTML5 的 canvas 元素使用 JavaScript 在网页上...

网友评论

      本文标题:canvas学习

      本文链接:https://www.haomeiwen.com/subject/buvrlqtx.html