canvas入门（一）绘制线与正方形

canvas入门系列

canvas入门（一） 绘制线与正方形
canvas入门（二） 标签width与style:width的区别
canvas入门（三） 绘制代码分块
canvas入门（四） 绘制线的扩展api
canvas入门（五） 贝塞尔曲线
canvas入门（六） 旋转、偏移、缩放
canvas入门（七） 中心旋转

hello,欢迎小伙伴来学习canvas,精彩的canvas世界即将扑面而来

首先在body中创建一个canvas标签,如下

<canvas width:300 height:300></canvas>

在js中获取canvas标签

var canvas = document.getElementsByTagName('canvas')[0];

获取canvas绘图环境

var context = canvas.getContext("2d");

例一
定义一个起点

context.moveTo(60, 60);

定义一个终点

context.lineTo(60, 260);

开始绘制

context.stroke();

例二
绘画一个正方形

context.moveTo(60, 60);
context.lineTo(60, 260);
context.lineTo(260, 260);
context.lineTo(260, 60);
context.lineTo(60, 60);
context.stroke();

例三
修饰正方形
定义线条粗细

context.lineWidth = 6;

定义线条颜色

context.strokeStyle = "#0ff";
context.moveTo(60, 60);
context.lineTo(60, 260);
context.lineTo(260, 260);
context.lineTo(260, 60);
context.lineTo(60, 60);
context.stroke();

效果图如下