canvas标签

-- h5新增的一个元素标签，用来在页面上回执2d的图形
canvas id="v1" width="800" height="600"



// 获取canvas标签
var cn=document.getElementById("v1")


// 获取canvas图形绘制画布内容
var ctx = cn.getContext("2d")


// 设置线条宽度
ctx.lineWidth=6

// 设置线条的颜色
ctx.strokeStyle="#000"

// 绘制矩形 第一个参数x坐标 第二个参数y坐标 宽和高 描边举行
ctx.strokeRect(50,50,50,50)
// 填充颜色
ctx.fillStyle="#f00";
// 绘制举行的 填充矩形 x y 都是相对于canvas而言的
ctx.fillRect(0,50,50,50)


ctx.lineWidth = 10;

// 创建一个绘制路径
ctx.beginPath()

// 设置线条的拐角的样式
ctx.lineJoin = "round"
// 设置线条端点的样式
ctx.lineCap = "round"


// 把笔尖移动到这个点上 相当于从该点开始绘制
ctx.moveTo(50,150)
// 绘制直线 ，绘制过程中点的坐标
ctx.lineTo(200,150)
ctx.lineTo(200,300)
ctx.lineTo(50,200)
// 闭合从当前的多点到开始的店连接一条线
ctx.closePath()


ctx.moveTo(350,150)
ctx.lineTo(350,350)


// 绘制路径结束 以描边的方式 显示的形状
ctx.stroke()
// 绘制路径结束
// ctx.fill()


// ctx.beginPath();
// 圆心的x坐标 圆心的y坐标 半径 起始角度 结束的角度 false顺时针
ctx.arc(250,250,50,0,Math.PI*2,false)
ctx.stroke()
ctx.fill()


ctx.beginPath()
ctx.strokeRect(500,300,200,200)
// 创建一个贝塞尔曲线
ctx.moveTo(400,300)
// 控制点的字表 400 100
// 结束点的坐标
ctx.quadraticCurveTo(400,100,600,100)
ctx.stroke()