canvas
Posted cuishuangshuang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas相关的知识,希望对你有一定的参考价值。
1、html
<canvas id="canvas" width="300" height="150"></canvas>
2、js
var canvas = document.getElementById("canvas") // 获取画布元素
var ctx = canvas.getContext("2d") // 获取绘图对象
线
ctx.lineWidth = 3 // 线条宽度
ctx.strokeStyle = "red" // 线条颜色
ctx.moveTo(0,0) // 线条起点
ctx.lineTo(50,50) // 线条终点
ctx.lineTo(100,100) // 线条终点
ctx.stroke() //执行上面代码
矩形
ctx.rect(50,50,300,150) // ctx.rect(左上角X坐标,左上角Y坐标,width,height)
ctx.fillStyle = "#ccc" // 填充颜色
ctx.fill() // 执行填充
以上是关于canvas的主要内容,如果未能解决你的问题,请参考以下文章