<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
</head>
<body style="width:100%; height:100%;">
<canvas id="study" width="600" height="360">您的浏览器不支持 HTML5 canvas 标签。</canvas><br />
图片： <img id="qq" width="200" height="auto" src="Images/timg (2).jpg" />
画布： <canvas id="test" width="600" height="360">您的浏览器不支持 HTML5 canvas 标签。</canvas><br />
画布： <canvas id="test2" width="600" height="360">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c = document.getElementById("study");//获取canvas画布
var ctx = c.getContext("2d");//设置二维绘图，目前仅允许"2d"
/*填充色
fillStyle --背景填充样式（颜色/图片）
strokeStyle --画笔色（即边线）
createLinearGradient --设置线性渐变色
createRadialGradient --设置放射性渐变色
createPattern --设置图片
纯色为与css色值规则一致即可
*/
//纯色背景填充
ctx.fillStyle = "#6f04f8";
ctx.fillRect(0, 0, 600, 360);
//纯色线条填充
ctx.strokeStyle = "#000000";
ctx.strokeRect(0, 0, 600, 360);
//线性渐变背景填充
var grd = ctx.createLinearGradient(0, 0, 0, 100);
grd.addColorStop(0, "#000000");
grd.addColorStop(0.5, "#191919");
grd.addColorStop(1, "#2c2c2c");
ctx.fillStyle = grd;
/*阴影
shadowBlur 阴影模糊级别
shadowOffsetX 阴影X轴偏移，正数往右偏移，负数相反
shadowOffsetY 阴影Y轴偏移，正数往下偏移，负数相反
shadowColor 阴影颜色
*/
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowColor = "#000000";
ctx.fillRect(20, 20, 600 - 40, 360 - 40);
//放射性渐变背景填充
var radGrd = ctx.createRadialGradient(255, 140, 5, 300, 200, 300);
radGrd.addColorStop(0, "#ff0000");
radGrd.addColorStop(1, "#000000");
ctx.fillStyle = radGrd;
ctx.fillRect(30, 30, 540, 300);
//图片填充1
var test = document.getElementById("test");
var testC = test.getContext("2d");
window.onload = function () {
var img = document.getElementById("qq");
var pat = testC.createPattern(img, "no-repeat");
testC.fillStyle = pat;
testC.fillRect(30, 30, 480 + 30, 240 + 30);
}
//注：由于360极速模式下图片是异步加载的，因此需要onload去兼容360浏览器极速模式
//图片填充2
var test2 = document.getElementById("test2");
var testC2 = test2.getContext("2d");
var img2 = new Image();
img2.onload = function () {
var pat = testC2.createPattern(img2, "no-repeat");
testC2.fillStyle = pat;
testC2.fillRect(30, 30, 480 + 30, 240 + 30);
}
img2.src = "Images/timg (2).jpg";
//img预加载模式下，onload应该放在为src赋值的上面，以避免已有缓存的情况下无法触发onload事件从而导致onload中的事件不执行的情况发生
//默认线条
ctx.beginPath();
ctx.lineWidth = 8;
ctx.strokeStyle = "#ffffff";
ctx.lineCap = "butt";
ctx.moveTo(40, 40);
ctx.lineTo(40+100, 40);
ctx.stroke();
//圆角线条
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(140+20, 40);
ctx.lineTo(160+50,40);
ctx.stroke();
//方头线条
ctx.beginPath();
ctx.lineCap = "square";
ctx.moveTo(210+20, 40);
ctx.lineTo(230+60, 40);
ctx.stroke();
//交汇斜角线
ctx.beginPath();
ctx.lineCap = "round";
ctx.lineJoin = "bevel";
ctx.moveTo(290 + 20, 40);
ctx.lineTo(310 + 30, 50);
ctx.lineTo(260, 70);
ctx.stroke();
//交汇斜角线
ctx.beginPath();
ctx.lineJoin = "round";
ctx.moveTo(340+20, 40);
ctx.lineTo(360+40, 50);
ctx.lineTo(360, 70);
ctx.stroke();
//交汇默认尖角线
ctx.beginPath();
ctx.lineJoin = "miter";
ctx.moveTo(400+20, 40);
ctx.lineTo(420+40, 50);
ctx.lineTo(420, 70);
ctx.stroke();
//带斜接长度的交汇默认尖角线
ctx.beginPath();
ctx.lineJoin = "miter";
ctx.miterLimit = 5;
ctx.moveTo(460+20, 40);
ctx.lineTo(480+40, 58);
ctx.lineTo(480, 75);
ctx.closePath();//闭合路径
ctx.stroke();
//二次贝塞尔曲线
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(300, 80);
ctx.quadraticCurveTo(320, 200, 500, 80);
ctx.stroke();
//三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(300, 180);
ctx.bezierCurveTo(355,200, 385, 120,400, 180);
ctx.stroke();
//剪切图形
ctx.rect(60, 60, 180, 60)
ctx.stroke();
ctx.clip();
ctx.fillStyle = "#ffffff";
ctx.fillRect(80, 75, 120, 75);
</script>
</body>
</html>
浙公网安备 33010602011771号