美文网首页
初试Canvas

初试Canvas

作者: 行动改变一切 | 来源:发表于2016-09-04 22:05 被阅读0次

定义和用法
<canvas> 标签定义图形,比如图表和其他图像。
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。
属性 描述
height:设置 canvas 的高度,width:设置 canvas 的宽度。
定义和用法
getContext("2d") 方法返回一个用于在画布上绘图的环境。

body中创建canvas标签

<canvas id="canvas" width="200" height="200">你的设备不支持canvas标签,请下载最新版本浏览器<canvas>

在脚本中写入

<script>
var canvas = documemt.getElementById("canvas");
var cxt = canvas.getContext("2d");// 获取上下文对象(画笔)
cxt.beginPath();//开始绘制
cxt.moveTo(50,50);//设置开始点
cxt.lineTo(100,100);//放置点
cxt.lineWidth = 20;//设置线的宽度
cxt.strokeStyle = "red";//设置线的颜色
cxt.lineJoin = "round";//设置线变成圆角
cxt.lineCap = "round";
cxt.closePath();//绘制结束
</script>

相关文章

  • 初试Canvas

    定义和用法 标签定义图形,比如图表和其他图像。 标签只是图形容器,您必须使用脚本来绘制图形。属性 描述hei...

  • android随笔之自定义View的Canvas用法

    对Canvas进行操作: 1,Canvas平移 2,Canvas缩放 3,Canvas旋转 Canvas操作例子 ...

  • HTML5中canvas使用

    1、Canvas基础 2、Canvas画直线 3、Canvas画矩形 4、Canvas画文字 5、Canvas画圆...

  • 【微信小程序】canvas is empty

    问题:使用canvas时,报错:canvas is empty原因:因为创建canvas对象时,canvas还未加...

  • canvas

    @(HTML5)[canvas与SVG] [TOC] 十 、canvas canvas的基本用法 canvas是H...

  • canvas

    canvas canvas绘制 获取元素var canvas = document.getelementbyid(...

  • 2D学习之Bitmap

    Canvas canvas =new Canvas(); Paint paint =new Paint(); ca...

  • UICamera 世界转UI坐标

    Vector2 pos; Canvas canvas = GameObject.Find("Canvas"...

  • Android中canvas基本使用

    canvas绘制 基本方法: canvas.drawArc ()//(扇形) canvas.drawCircle(...

  • 2D学习之Paint

    Canvas canvas =new Canvas(); //-------设置画笔无锯齿 Paint paint...

网友评论

      本文标题:初试Canvas

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