源码+注释，学习canvas的使用
/*************************/
功能：设置并显示文字，并通过浏览器进行查看
/************************/
<html>
<canvas id = "MyCanvans"></canvas>
<script type="text/javascript">
//canvas可理解为新建一个名为MyCanvans的画布，就一个新的页面
//这个sript是JS，目前为默认，具体可查找相关信息
console.log("First Step:");
//consle.log是在浏览器中进行调试时确认输出，可通过
//ctrl+shift+J进行查看究竟运行到哪步了
var canvas = document.getElementById('MyCanvans');
//canvas可自定义,即新建了一个var类型
//document,getElementById功能猜测为引用之前的画布/页面
console.log("Second Step:");
var context = canvas.getContext("2d");
//唯一合法的值：2D-二维绘图,此处context也可自定义
//getContext的功能自己理解为对画布的2维对象的新建
console.log ("Third Step:");
context.fillStyle = '#000080';
//fillText设置2维对象的颜色，一般#j+数字就是颜色
context.font = 'italic 36px sans-serif';
//font设置文字的形式，italic-倾斜，bold-加粗
//36px是文字的大小，sans-serif是文字类型，还有Georgia等
context.textBaseline = 'top';
//textBaseline是文字的位置，top为顶部
context.fillText ("Hello world!",10,50);
//fillText是输出文字/字符串，10是距离左界面的距离，50是距离顶部的距离
context.font = 'bold 36px sans-serif';
context.fillText ("Hello world!",15,100);
//扩展内容：
/********************
以下参考菜鸟教程
*********************/
/*
// 创建一个渐变
context.font = '36px Verdana';
var gradient=context.createLinearGradient(0,0,canvas.width,0);
//新建一个var的gradient，用于创建一个颜色的渐变，
/********************/
基于https://blog.csdn.net/dreamjay1997/article/details/83184505的理解
/*******************/
//createLinearGradient用于定义一根线来进行渐变的方向：x0,y0,x1,y1
//addColorStop第一个参数是用于决定完成颜色渐变所需的长度
/*
gradient.addColorStop("0","magenta");
//目前可以确定，addColorStop就是用于颜色的渐变
//数字用于对应的所占比例？再加上颜色
//magenta是品红
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 填充一个渐变
context.fillStyle=gradient;
context.fillText("Big smile!",10,130);
*/
</script>
</html>
8209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
