canvas学习 -- 第一天

Posted on 2019-12-04 11:04  凡凡0410  阅读(94)  评论(0编辑  收藏  举报

一、建立canvas画布

  <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000; "></canvas>   【Ps:width,height是画布的宽高,样式是为了显示这个画布,绘制是在js中】

二、运行在script中 

  A: 获取当前canvas的id元素。如:var myCanvas = document.getElemetById("myCanvas");

  B: 获取这个对象上的方法,获得 2d 上下文对象。var ctx=myCanvas.getContext(“2d”) ;      

    contextType参数有以下四种:

    “2d”,创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。

    “webgl”(或“experimental-webgl”),创建一个WebGLRenderingContext对象作为3D渲染的上下文,只在实现了WebGL 2的浏览器上可用,实验性特性。

    “webgl2”,创建一个WebGL2RenderingContext对象作为3D渲染的上下文,只在实现了WebGL 3的浏览器上可用。
    “bitmaprenderer”,创建一个ImageBitmapRenderingContext,用于将位图渲染到canvas上下文上,实验性特性。

      

Copyright © 2024 凡凡0410
Powered by .NET 9.0 on Kubernetes