canvas基础

<!DOCTYPE html>
<!--
作者：1243860037@qq.com
时间：2017-11-03
描述：
重要记录：
canvas有width和height“属性”，记住是属性不是样式，后面会专门谈到。
canvas是向页面提供一张画布，然后才能在上面绘画
属性： width，height是用来确定画布的大小，
样式：width，height是让这张画布看起来有多大，
例如：本例子中是一个500*500的画布，绘制条（0,0）（250,250）的半对角线
当设置样式为100*100时可以看到只是将画布等比例缩小，而半对角线还是
半对角线，它的250是相对于画布500的250，而不是页面的250，所以不会撑破
-->
<html>
<head>
<meta charset="utf-8"> <!-- 下面有 文字的绘制，所以要设置编码 -->
<style>
/*canvas{width: 100px;height: 100px;} /*本行是为了区分样式和属性的width，height而作对比项才添加的*/
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="background: pink"></canvas>
<script>

var canvas=document.getElementById("myCanvas"); //获取canvas的控制权
var context=canvas.getContext("2d"); //设置绘图环境为2d(也就是平面)
context.lineWidth="3"; //设置线的宽度
context.strokeStyle="aqua"; //设置线的颜色
context.beginPath();
context.moveTo(0,0); //设置起点
context.lineTo(250,250); //设置终点
context.lineTo(250,400); //连续绘制
context.stroke(); //将起点和终点连接起来 stroke：笔画
context.beginPath(); //开始一个新的绘画
context.arc(150,100,100,(Math.PI)/4,(Math.PI)/2,true);
context.stroke();
//绘制文字
context.beginPath();
context.lineWidth="1";
context.strokeStyle=null;
context.font="80px 隶书" //注意此处为空格
context.strokeText("刘",300,300); //空心文字
context.fillText("耀",400,300); //实心文字
</script>
</body>
</html>

posted on 2017-11-03 21:34  xiaoxiaoyao61  阅读(109)  评论(0)  编辑  收藏  举报

导航