代码片段如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas基础</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<link href="css/monokai_sublime.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href="codemirror/lib/codemirror.css" rel="stylesheet" type="text/css">
<link href="codemirror/theme/monokai.css" rel="stylesheet" type="text/css">
<link href="codemirror/addon/display/fullscreen.css" rel="stylesheet" type="text/css">
</head>
<body class="example">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<textarea id="joldy">
<script type="text/javascript" class="joldy">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.moveTo(10, 10);
cxt.lineTo(150, 50);
cxt.lineTo(10, 50);
cxt.stroke();
</script>
</textarea>
<script type="text/javascript" class="joldy">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.moveTo(10, 10);
cxt.lineTo(150, 50);
cxt.lineTo(10, 50);
cxt.stroke();
</script>
<!-- 2 -->
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<p>在canvas中绘制圆形, 我们将使用以下方法:</p>
<p>arc(x,y,r,start,stop)</p>
<textarea id="myCanvas1">
<script type="text/javascript">
var c = document.getElementById("myCanvas1");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.beginPath();
cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
</script>
</textarea>
<script type="text/javascript">
var c = document.getElementById("myCanvas1");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.beginPath();
cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
</script>
<!-- 3 -->
<canvas id="myCanvas3" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<img src="eg_flower.png" style="display: none">
<textarea>
<script type="text/javascript">
var c = document.getElementById("myCanvas3");
var cxt = c.getContext("2d");
var img = new Image()
img.src = "eg_flower.png"
cxt.drawImage(img, 0, 0);
</script>
</textarea>
<script type="text/javascript" class="joldy">
var c = document.getElementById("myCanvas3");
var cxt = c.getContext("2d");
var img = new Image()
img.src = "eg_flower.png"
cxt.drawImage(img, 0, 0);
</script>
<!-- 4 -->
<p>
使用 canvas 绘制文本，重要的属性和方法如下：
</p>
<p>font - 定义字体</p>
<p>fillText(text,x,y) - 在 canvas 上绘制实心的文本</p>
<p>strokeText(text,x,y) - 在 canvas 上绘制空心的文本</p>
<canvas id="myCanvas4" width="300" height="200" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas4");
var ctx = c.getContext("2d");
ctx.font = "30px YaHei";
ctx.fillStyle = "red";
ctx.fillText("Hello World", 10, 50);
/*
fillText(text,x,y,maxWidth);
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置（相对于画布）。
y 开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 可选。允许的最大文本宽度，以像素计。
*/
ctx.strokeStyle = "red";
ctx.strokeText("Hello World", 20, 100);
</script>
<!-- 5 -->
<pre>
Canvas - 渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
使用 createLinearGradient():
</pre>
<canvas id="myCanvas5" width="300" height="200" style="border:1px solid #d3d3d3;"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas5");
var ctx = c.getContext("2d");
// 创建渐变
/*
addColorStop(stop,color); 方法规定 gradient 对象中的颜色和位置。
stop: 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置
color: 在结束位置显示的 CSS 颜色值
*/
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 填充渐变
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
// 创建渐变
var grd1 = ctx.createRadialGradient(75, 140, 5, 90, 150, 100);
grd1.addColorStop(0, "red");
grd1.addColorStop(1, "white");
// 填充渐变
ctx.fillStyle = grd1;
ctx.fillRect(10, 100, 150, 80); // fillRect(x,y,width,height); 矩形左上角的 x 坐标; 矩形左上角的 y 坐标; 矩形的宽度，以像素计; 矩形的高度，以像素计
</script>
<!-- 6 -->
<p>canvas渐变文字</p>
<canvas id="canvas6" width="600" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas6'),
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); // 渐变开始点的 x 坐标; 渐变开始点的 y 坐标; 渐变结束点的 x 坐标; 渐变结束点的 y 坐标
gradient.addColorStop('0', 'black');
gradient.addColorStop('0.3', 'green');
gradient.addColorStop('0.6', 'yellow');
gradient.addColorStop('1', 'red');
/*
addColorStop(stop,color); 方法规定 gradient 对象中的颜色和位置。
stop: 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置
color: 在结束位置显示的 CSS 颜色值
*/
ctx.font = '40px yahei';
ctx.fillStyle = gradient
ctx.fillText('hello world', 100, 100);
</script>
<!-- canvas7 绘制一个带有黑色阴影的蓝色矩形： -->
<p>绘制一个带有黑色阴影的蓝色矩形：</p>
<canvas id="canvas7" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<pre>
<code>
var c=document.getElementById("canvas7");
var ctx=c.getContext("2d");
ctx.shadowBlur=20;
ctx.fillStyle="blue";
ctx.shadowColor="black";
ctx.fillRect(20,20,100,80);
ctx.shadowColor="red";
ctx.fillRect(140,20,100,80);
</code>
</pre>
<script type="text/javascript">
var c = document.getElementById("canvas7");
var ctx = c.getContext("2d");
ctx.shadowBlur = 20; // 返回阴影的模糊级数
ctx.shadowOffsetX = 20; // 正值或负值，定义阴影与形状的水平距离。
ctx.shadowOffsetY = 20; // 正值或负值，定义阴影与形状的垂直距离。
ctx.fillStyle = "blue";
ctx.shadowColor = "black";
ctx.fillRect(20, 20, 100, 80);
ctx.shadowColor = "red";
ctx.fillRect(140, 20, 100, 80);
</script>
<!-- canvas 8 canvas lineCap lineJoin lineWidth 属性 -->
<p>canvas lineCap 属性</p>
<canvas id="canvas8" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("canvas8");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 10; // 属性设置或返回当前线条的宽度，以像素计。
ctx.lineCap = "butt"; // 向线条的每个末端添加平直的边缘。
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "round"; // 向线条的每个末端添加圆形线帽。
ctx.moveTo(20, 40);
ctx.lineTo(200, 40);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "square"; // 向线条的每个末端添加正方形线帽。
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();
// lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时。
ctx.beginPath();
ctx.lineJoin = "round";
ctx.moveTo(80, 80);
ctx.lineTo(150, 110);
ctx.lineTo(80, 160);
ctx.stroke();
/*
miterLimit 属性设置或返回最大斜接长度。
斜接长度指的是在两条线交汇处内角和外角之间的距离。
提示：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。
边角的角度越小，斜接长度就会越大。
为了避免斜接长度过长，我们可以使用 miterLimit 属性。
*/
ctx.beginPath();
ctx.lineJoin = "miter";
ctx.miterLimit = 50;
ctx.moveTo(160, 160);
ctx.lineTo(200, 167);
ctx.lineTo(160, 174);
ctx.stroke();
</script>
<!-- canvas9 转换 -->
<p>转换</p>
<pre>
定义和用法
scale() 方法缩放当前绘图，更大或更小。
注释：如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。
JavaScript 语法：
context.scale(scalewidth,scaleheight);
参数值
参数 描述
scalewidth 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
scaleheight 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)
</pre>
<canvas id="canvas9" width="1000" height="250" style="border:1px solid #d3d3d3;"></canvas>
<script type="text/javascript">
var c = document.getElementById("canvas9");
var ctx = c.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2); // 放大200%
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
// rotate
ctx.scale(0.1, 0.1);
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(400, 20, 100, 50);
</script>
<p>canvas transform()</p>
<pre>
绘制一个矩形；通过 transform() 添加一个新的变换矩阵，再次绘制矩形；添加一个新的变换矩阵，然后再次绘制矩形。
请注意，每当您调用 transform() 时，它都会在前一个变换矩阵上构建：
JavaScript 语法：
context.transform(a,b,c,d,e,f);
参数值
参数 描述
a 水平缩放绘图
b 水平倾斜绘图
c 垂直倾斜绘图
d 垂直缩放绘图
e 水平移动绘图
f 垂直移动绘图
</pre>
<canvas id="canvas10" width="1000" height="250" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("canvas10");
var ctx = c.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);
</script>
<p>canvas setTransform() 方法</p>
<pre>
绘制一个矩形，通过 setTransform() 重置并创建新的变换矩阵，再次绘制矩形，重置并创建新的变换矩阵，然后再次绘制矩形。
请注意，每当您调用 setTransform() 时，它都会重置前一个变换矩阵然后构建新的矩阵，因此在下面的例子中，不会显示红色矩形，因为它在蓝色矩形下面：
</pre>
<canvas id="canvas11" width="1000" height="250" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("canvas11");
var ctx = c.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);
</script>
<!-- canvas -->
<p>canvas星空背景</p>
<canvas id="starrynight"></canvas>
<script>
function drawing() {
var c = document.getElementById('starrynight');
var ctx = c.getContext('2d');
var xMax = c.width = 700; //获取浏览器的屏幕的可用宽度
var yMax = c.height = 300; //获取浏览器的屏幕的可用高度
var hmTimes = Math.round(xMax + yMax); //获得 int 四舍五入(绘制星星数量)
for (var i = 0; i <= hmTimes; i++) {
var randomX = Math.floor((Math.random() * xMax) + 1); //绘制矩形的X坐标（1-xMax的随机数）
var randomY = Math.floor((Math.random() * yMax) + 1); //绘制矩形的Y坐标（1-yMax的随机数）
var randomSize = Math.floor((Math.random() * 2) + 1); //星星大小（1-2随机数）
var randomOpacityOne = Math.floor((Math.random() * 9) + 1); //随机1-9透明度值
var randomOpacityTwo = Math.floor((Math.random() * 9) + 1); //随机1-9透明度值
var randomHue = Math.floor((Math.random() * 360) + 1); //随机1-360颜色值
//大于1添加阴影
if (randomSize > 1) {
ctx.shadowBlur = Math.floor((Math.random() * 15) + 5); //阴影，随机5-15
ctx.shadowColor = "white"; //阴影颜色，白色
}
ctx.fillStyle = "hsla(" + randomHue + ", 30%, 80%, ." + randomOpacityOne + randomOpacityTwo + ")"; //hsla 颜色设置（a是透明度）
ctx.fillRect(randomX, randomY, randomSize, randomSize); //绘制矩形
}
}
drawing();
</script>
<!-- canvas -->
<p>canvas动画</p>
<canvas id="canvas_1"></canvas>
<script type="text/javascript" src="common.js"></script>
<p>想继续学习的同学可以登录 <a href="http://canvas.migong.org">migong</a> 进行学习</p>
<!-- 引入CodeMirror核心文件 -->
<script type="text/javascript" src="codemirror.js"></script>
<!-- CodeMirror支持不同语言，根据需要引入JS文件 -->
<!-- 因为HTML混合语言依赖Javascript、XML、CSS语言支持，所以都要引入 -->
<script type="text/javascript" src="codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="codemirror/mode/xml/xml.js"></script>
<script type="text/javascript" src="codemirror/mode/css/css.js"></script>
<script type="text/javascript" src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
<!-- 下面分别为显示行数、括号匹配和全屏插件 -->
<script type="text/javascript" src="codemirror/addon/selection/active-line.js"></script>
<script type="text/javascript" src="codemirror/addon/edit/matchbrackets.js"></script>
<script type="text/javascript" src="codemirror/addon/display/fullscreen.js"></script>
<script type="text/javascript">
/*$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});*/
(function($) {
var ele = document.getElementsByTagName('textarea');
/*var arr = [];
for ( var i = 0; i < ele.length; i++) {
arr.push(`
editor${i} = CodeMirror.fromTextArea(ele[${i}], {
lineNumbers: true, // 显示行数
indentUnit: 4, // 缩进单位为4
styleActiveLine: true, // 当前行背景高亮
matchBrackets: true, // 括号匹配
mode: 'htmlmixed', // HMTL混合模式
lineWrapping: true, // 自动换行
theme: 'monokai', // 使用monokai模版
});
editor${i}.on("change", function (edt, changes) {
console.log(edt.getValue());
//eval('(' + edt.getValue() + ')');
$('.joldy').remove();
var c=$("#myCanvas");
c.attr('width', c.width());
c.attr('height', c.height());
$('body').append(edt.getValue());
editor.refresh();
});
`
)
}
for(var i = 0; i < arr.length; i++) {
eval(arr[i]);
}*/
var id1 = CodeMirror.fromTextArea(document.getElementById('joldy'), {
lineNumbers: true, // 显示行数
indentUnit: 4, // 缩进单位为4
styleActiveLine: true, // 当前行背景高亮
matchBrackets: true, // 括号匹配
mode: 'htmlmixed', // HMTL混合模式
lineWrapping: true, // 自动换行
theme: 'monokai', // 使用monokai模版
});
id1.setOption("extraKeys", {
// Tab键换成4个空格
Tab: function(cm) {
var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
cm.replaceSelection(spaces);
},
// F11键切换全屏
"F11": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
// Esc键退出全屏
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
});
id1.on("change", function (edt, changes) {
console.log(edt.getValue());
//eval('(' + edt.getValue() + ')');
$('.joldy').remove();
var c=$("#myCanvas");
c.attr('width', c.width());
c.attr('height', c.height());
$('body').append(edt.getValue());
editor.refresh();
});
})(jQuery);
</script>
</body>
</html>var canvas = document.querySelector('#canvas_1'),
ctx = canvas.getContext('2d'), //获取该canvas的2D绘图环境对象
particles = [],
patriclesNum = 10,
w = 500,
h = 500,
colors = ['#f35d4f', '#f36849', '#c0d988', '#6ddaf1', '#f1e85b'];
canvas.width = 500;
canvas.height = 500;
// canvas.style.left = (window.innerWidth - 500)/2+'px';
/*if(window.innerHeight>500)
canvas.style.top = (window.innerHeight - 500)/2+'px';*/
function Factory() {
this.x = Math.round(Math.random() * w); // x轴随机坐标
this.y = Math.round(Math.random() * h); // y轴随机坐标
this.rad = Math.round(Math.random() * 1) + 1;
this.rgba = colors[Math.round(Math.random() * 3)]; // 随机选取color颜色
this.vx = Math.round(Math.random() * 3) - 1.5; // x轴正负加减1.5
this.vy = Math.round(Math.random() * 3) - 1.5; // y轴正负加减1.5
}
function draw() {
ctx.clearRect(0, 0, w, h); //通过clearRect来擦除画布
ctx.globalCompositeOperation = 'lighter';
for (var i = 0; i < patriclesNum; i++) {
var temp = particles[i];
var factor = 1;
for (var j = 0; j < patriclesNum; j++) {
var temp2 = particles[j];
ctx.linewidth = 0.5;
if (temp.rgba == temp2.rgba && findDistance(temp, temp2) < 50) {
ctx.strokeStyle = temp.rgba;
ctx.beginPath();
ctx.moveTo(temp.x, temp.y);
ctx.lineTo(temp2.x, temp2.y);
ctx.stroke();
factor++;
}
}
ctx.fillStyle = temp.rgba;
ctx.strokeStyle = temp.rgba;
ctx.beginPath(); // 重置画笔，避免污染
ctx.arc(temp.x, temp.y, temp.rad * factor, 0, Math.PI * 2, true);
ctx.fill(); // 填充
ctx.closePath();
ctx.beginPath(); // 重置画笔，避免污染
ctx.arc(temp.x, temp.y, (temp.rad + 10) * factor, 0, Math.PI * 2, true);
ctx.stroke(); //描边
ctx.closePath();
temp.x += temp.vx; // x轴正负加减1.5
temp.y += temp.vy; // y轴正负加减1.5
if (temp.x > w) temp.x = 0;
if (temp.x < 0) temp.x = w;
if (temp.y > h) temp.y = 0;
if (temp.y < 0) temp.y = h;
}
}
function findDistance(p1, p2) {
return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
}
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
(function init() {
for (var i = 0; i < patriclesNum; i++) {
particles.push(new Factory);
}
})();
(function loop() {
draw();
requestAnimFrame(loop);
})();
1133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
