<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="../img/tu1.jpg" id="tu" />
<!--canvas 也属于界面元素之一 canvas属于字符集元素(内嵌元素) -->
<canvas id="mycanvas" width="400" height="500" style="background-color: greenyellow;
border: 3px solid #000000;">
浏览器不支持canvas!!!
</canvas>
<div id="mydiv1">
<input type="button" value="绘制文字" οnclick="wenzi()"/>
<input type="button" value="绘制空心文字" οnclick="kongxinwenzi()"/>
<input type="button" value="绘制矩形" οnclick="juxing()"/>
<input type="button" value="绘制实心矩形" οnclick="shixinjuxing()"/>
<input type="button" value="绘制图片" οnclick="tupian()"/>
<input type="button" value="绘制图片2" οnclick="tupian2()"/>
<input type="button" value="绘制图片3" οnclick="tupian3()"/>
<input type="button" value="绘制路径" οnclick="lujing()"/>
<input type="button" value="绘制路径2" οnclick="lujing2()"/>
<input type="button" value="绘制曲线" οnclick="quxian()"/>
</div>
<input type="button" value="清除" οnclick="qingchu()"/>
<div>
</div>
<script>
var mycanvas = document.getElementById("mycanvas");
var gr = mycanvas.getContext("2d");
gr.font = "30px Verdana";
gr.fillStyle = "blue";
gr.fillText("W3School",20,50);
// alert(gr);//CanvasRenderingContext2D(画笔对象)
//清除
function qingchu(){
gr.clearRect(0,0,400,500);
}
function wenzi(){
// fillTexe函数的作用是绘制文字内容(注意绘制出来的结果是图形,无法直接选中其中的文字内容)
// 参数有四个,至少写出其中三个
// 1--需要绘制的内容文字 2--水平x轴的坐标点 3--垂直y轴的坐标点 4--绘制的文字的总的宽度,避免溢出
// 注意:坐标点表示绘制的第一个文字的左下角
// 不做样式设置的话,默认文字为黑色
gr.font="30px Georgia";
// 创建渐变
var gradient=gr.createLinearGradient(0,0,mycanvas.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变填色
gr.fillStyle=gradient;
gr.fillText("W3School",10,90);
}
// 空心矩形
function juxing(){
gr.strokeRect(20,60,50,30);
}
// 实心矩形
function shixinjuxing(){
gr.fillStyle="orange";
gr.fillRect(50,60,50,30);
}
// 空心文字
function kongxinwenzi(){
gr.font="30px '微软雅黑'";
gr.strokeText("空心文字",10,90);
}
//绘制图片
function tupian(){
var tu = document.getElementById("tu");
// gr.drawImage(img,x,y);
// 三个参数,分别表示:
// 1.img 规定要使用的图像、画布或视频。
// 2.x 在画布上放置图像的 x 坐标位置。
// 3.y 在画布上放置图像的 y 坐标位置。
gr.drawImage(tu,50,100);
}
function tupian2(){
var tu = document.getElementById("tu");
// gr.drawImage(img,x,y,width,height);
// 五个参数,分别表示:
// 1.img 规定要使用的图像、画布或视频。
// 2.x 在画布上放置图像的 x 坐标位置。
// 3.y 在画布上放置图像的 y 坐标位置。
// 4.width 要使用的图像的宽度。(伸展或缩小图像)
// 5.height 要使用的图像的高度。(伸展或缩小图像)
gr.drawImage(tu,50,120,100,100);
}
function tupian3(){
var tu = document.getElementById("tu");
// gr.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// 九个参数,分别表示:
// 1.img 规定要使用的图像、画布或视频。
// 2.sx 开始剪切的 x 坐标位置。
// 3.sy 开始剪切的 y 坐标位置。
// 4.swidth 被剪切图像的宽度。
// 5.sheight 被剪切图像的高度。
// 6.x 在画布上放置图像的 x 坐标位置。
// 7.y 在画布上放置图像的 y 坐标位置。
// 8.width 要使用的图像的宽度。(伸展或缩小图像)
// 9.height 要使用的图像的高度。(伸展或缩小图像)
gr.drawImage(tu,70,50,200,200,70,159,150,150);
}
//绘制路径
function lujing(){
// gr.beginPath();
// moveTo 仅仅只是坐标点的变化,不会绘制连线
gr.moveTo(10,10);
// lineTo 会从起始坐标绘制一条直线
gr.lineTo(100,200);
gr.stroke();
// gr.closePath();
}
function lujing2(){
gr.arc(100,100,60,0,Math.PI /18,true);
gr.stroke();
}
//绘制曲线
function quxian(){
gr.beginPath();
gr.moveTo(10,50);
gr.lineTo(100,200);
gr.quadraticCurveTo(10,200,200,100);
// gr.closePath();
gr.stroke();
}
</script>
</body>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="../img/tu1.jpg" id="tu" />
<!--canvas 也属于界面元素之一 canvas属于字符集元素(内嵌元素) -->
<canvas id="mycanvas" width="400" height="500" style="background-color: greenyellow;
border: 3px solid #000000;">
浏览器不支持canvas!!!
</canvas>
<div id="mydiv1">
<input type="button" value="绘制文字" οnclick="wenzi()"/>
<input type="button" value="绘制空心文字" οnclick="kongxinwenzi()"/>
<input type="button" value="绘制矩形" οnclick="juxing()"/>
<input type="button" value="绘制实心矩形" οnclick="shixinjuxing()"/>
<input type="button" value="绘制图片" οnclick="tupian()"/>
<input type="button" value="绘制图片2" οnclick="tupian2()"/>
<input type="button" value="绘制图片3" οnclick="tupian3()"/>
<input type="button" value="绘制路径" οnclick="lujing()"/>
<input type="button" value="绘制路径2" οnclick="lujing2()"/>
<input type="button" value="绘制曲线" οnclick="quxian()"/>
</div>
<input type="button" value="清除" οnclick="qingchu()"/>
<div>
</div>
<script>
var mycanvas = document.getElementById("mycanvas");
var gr = mycanvas.getContext("2d");
gr.font = "30px Verdana";
gr.fillStyle = "blue";
gr.fillText("W3School",20,50);
// alert(gr);//CanvasRenderingContext2D(画笔对象)
//清除
function qingchu(){
gr.clearRect(0,0,400,500);
}
function wenzi(){
// fillTexe函数的作用是绘制文字内容(注意绘制出来的结果是图形,无法直接选中其中的文字内容)
// 参数有四个,至少写出其中三个
// 1--需要绘制的内容文字 2--水平x轴的坐标点 3--垂直y轴的坐标点 4--绘制的文字的总的宽度,避免溢出
// 注意:坐标点表示绘制的第一个文字的左下角
// 不做样式设置的话,默认文字为黑色
gr.font="30px Georgia";
// 创建渐变
var gradient=gr.createLinearGradient(0,0,mycanvas.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变填色
gr.fillStyle=gradient;
gr.fillText("W3School",10,90);
}
// 空心矩形
function juxing(){
gr.strokeRect(20,60,50,30);
}
// 实心矩形
function shixinjuxing(){
gr.fillStyle="orange";
gr.fillRect(50,60,50,30);
}
// 空心文字
function kongxinwenzi(){
gr.font="30px '微软雅黑'";
gr.strokeText("空心文字",10,90);
}
//绘制图片
function tupian(){
var tu = document.getElementById("tu");
// gr.drawImage(img,x,y);
// 三个参数,分别表示:
// 1.img 规定要使用的图像、画布或视频。
// 2.x 在画布上放置图像的 x 坐标位置。
// 3.y 在画布上放置图像的 y 坐标位置。
gr.drawImage(tu,50,100);
}
function tupian2(){
var tu = document.getElementById("tu");
// gr.drawImage(img,x,y,width,height);
// 五个参数,分别表示:
// 1.img 规定要使用的图像、画布或视频。
// 2.x 在画布上放置图像的 x 坐标位置。
// 3.y 在画布上放置图像的 y 坐标位置。
// 4.width 要使用的图像的宽度。(伸展或缩小图像)
// 5.height 要使用的图像的高度。(伸展或缩小图像)
gr.drawImage(tu,50,120,100,100);
}
function tupian3(){
var tu = document.getElementById("tu");
// gr.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// 九个参数,分别表示:
// 1.img 规定要使用的图像、画布或视频。
// 2.sx 开始剪切的 x 坐标位置。
// 3.sy 开始剪切的 y 坐标位置。
// 4.swidth 被剪切图像的宽度。
// 5.sheight 被剪切图像的高度。
// 6.x 在画布上放置图像的 x 坐标位置。
// 7.y 在画布上放置图像的 y 坐标位置。
// 8.width 要使用的图像的宽度。(伸展或缩小图像)
// 9.height 要使用的图像的高度。(伸展或缩小图像)
gr.drawImage(tu,70,50,200,200,70,159,150,150);
}
//绘制路径
function lujing(){
// gr.beginPath();
// moveTo 仅仅只是坐标点的变化,不会绘制连线
gr.moveTo(10,10);
// lineTo 会从起始坐标绘制一条直线
gr.lineTo(100,200);
gr.stroke();
// gr.closePath();
}
function lujing2(){
gr.arc(100,100,60,0,Math.PI /18,true);
gr.stroke();
}
//绘制曲线
function quxian(){
gr.beginPath();
gr.moveTo(10,50);
gr.lineTo(100,200);
gr.quadraticCurveTo(10,200,200,100);
// gr.closePath();
gr.stroke();
}
</script>
</body>
</html>
二
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="400" height="500" style="background-color: white;">
浏览器不支持canvas!!!
</canvas>
<div id="mydiv1">
<input type="button" value="绘制渐变1" οnclick="jianbian1()"/>
</br> </br>
<input type="button" value="绘制渐变2" οnclick="jianbian2()"/>
<input type="button" value="转换1" οnclick="zhuanhuan1()"/>
<input type="button" value="阴影" οnclick="yinying()"/>
<input type="button" value="清除" οnclick="qingchu()"/>
</div>
<script>
var mycanvas = document.getElementById("mycanvas");
var gr = mycanvas.getContext("2d");
function qingchu(){
gr.clearRect(0,0,500,400);
}
// var gradient=gr.createLinearGradient(0,0,mycanvas.width,0);
// gradient.addColorStop(0,"magenta");
// gradient.addColorStop(0.5,"yellow");
// gradient.addColorStop(1.0,"white");
//
// gr.beginPath();
// gr.moveTo(150,150);
// gr.arc(150,150,50,5,2*Math.PI/2.5,true);
// gr.fillStyle=gradient;
// gr.fill();
//
//
// gr.beginPath();
// gr.moveTo(152,155);
// gr.arc(152,155,50,7,2*Math.PI/2.5,false);
// gr.fillStyle="cyan";
// gr.fill();
//
// gr.beginPath();
// gr.moveTo(155,152);
// gr.arc(155,152,50,5,Math.PI/4.5,false);
// gr.fillStyle="skyblue";
// gr.fill();
function jianbian1(){
// 创建线性渐变的对象,设置渐变的范围
// gr.createLinearGradient(x0,y0,x1,y1);
// 四个参数,分别表示:
// 1. x0 渐变开始点的 x 坐标
// 2. y0 渐变开始点的 y 坐标
// 3. x1 渐变结束点的 x 坐标
// 4. y1 渐变结束点的 y 坐标
var li = gr.createLinearGradient(50,100,300,100);
// 设置颜色变化的范围
li.addColorStop(0,"yellow");
li.addColorStop(0.5,"white");
li.addColorStop(1,"cyan");
// 将渐变对象赋值给填充属性
gr.fillStyle=li;
// 绘制图形
gr.fillRect(50,100,250,200);
}
function jianbian2(){
// 创建放射状/环形的渐变
// gr.createRadialGradient(x0,y0,r0,x1,y1,r1);
// 六个参数,分别表示:
// 1. x0 渐变的开始圆的 x 坐标
// 2. y0 渐变的开始圆的 y 坐标
// 3. r0 开始圆的半径
// 4. x1 渐变的结束圆的 x 坐标
// 5. y1 渐变的结束圆的 y 坐标
// 6. r1 结束圆的半径
var ra = gr.createRadialGradient(260,200,150,50,100,50);
ra.addColorStop(0,"cyan");
ra.addColorStop(0.5,"yellowgreen");
ra.addColorStop(1,"blue");
gr.fillStyle=ra;
gr.arc(200,200,100,0,2*Math.PI);
gr.fill();
}
function zhuanhuan1(){
// rotate 旋转当前绘图
// eg: gr.rotate(angle);
// 旋转角度,以弧度计。
//如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算。
//举例:如需旋转 5 度,可规定下面的公式:5*Math.PI/180。
gr.fillStyle="rgba(0,0,0,0.5)";
gr.translate(200,200);
for(var i=0;i<18;i++) {
gr.rotate(20 * Math.PI / 180);
// fillRect 绘制被填充的矩形
gr.fillRect(50, 50, 30, 30);
}
}
function yinying(){
// 设置阴影效果
// 数字越小,颜色越纯;数字越大,颜色越模糊
gr.shadowBlur=10;
gr.shadowColor="green";
gr.shadowOffsetX=10;
gr.shadowOffsetY=10;
gr.fillStyle = "orange";
gr.fillRect(100,100,150,150);
}
</script>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="400" height="500" style="background-color: white;">
浏览器不支持canvas!!!
</canvas>
<div id="mydiv1">
<input type="button" value="绘制渐变1" οnclick="jianbian1()"/>
</br> </br>
<input type="button" value="绘制渐变2" οnclick="jianbian2()"/>
<input type="button" value="转换1" οnclick="zhuanhuan1()"/>
<input type="button" value="阴影" οnclick="yinying()"/>
<input type="button" value="清除" οnclick="qingchu()"/>
</div>
<script>
var mycanvas = document.getElementById("mycanvas");
var gr = mycanvas.getContext("2d");
function qingchu(){
gr.clearRect(0,0,500,400);
}
// var gradient=gr.createLinearGradient(0,0,mycanvas.width,0);
// gradient.addColorStop(0,"magenta");
// gradient.addColorStop(0.5,"yellow");
// gradient.addColorStop(1.0,"white");
//
// gr.beginPath();
// gr.moveTo(150,150);
// gr.arc(150,150,50,5,2*Math.PI/2.5,true);
// gr.fillStyle=gradient;
// gr.fill();
//
//
// gr.beginPath();
// gr.moveTo(152,155);
// gr.arc(152,155,50,7,2*Math.PI/2.5,false);
// gr.fillStyle="cyan";
// gr.fill();
//
// gr.beginPath();
// gr.moveTo(155,152);
// gr.arc(155,152,50,5,Math.PI/4.5,false);
// gr.fillStyle="skyblue";
// gr.fill();
function jianbian1(){
// 创建线性渐变的对象,设置渐变的范围
// gr.createLinearGradient(x0,y0,x1,y1);
// 四个参数,分别表示:
// 1. x0 渐变开始点的 x 坐标
// 2. y0 渐变开始点的 y 坐标
// 3. x1 渐变结束点的 x 坐标
// 4. y1 渐变结束点的 y 坐标
var li = gr.createLinearGradient(50,100,300,100);
// 设置颜色变化的范围
li.addColorStop(0,"yellow");
li.addColorStop(0.5,"white");
li.addColorStop(1,"cyan");
// 将渐变对象赋值给填充属性
gr.fillStyle=li;
// 绘制图形
gr.fillRect(50,100,250,200);
}
function jianbian2(){
// 创建放射状/环形的渐变
// gr.createRadialGradient(x0,y0,r0,x1,y1,r1);
// 六个参数,分别表示:
// 1. x0 渐变的开始圆的 x 坐标
// 2. y0 渐变的开始圆的 y 坐标
// 3. r0 开始圆的半径
// 4. x1 渐变的结束圆的 x 坐标
// 5. y1 渐变的结束圆的 y 坐标
// 6. r1 结束圆的半径
var ra = gr.createRadialGradient(260,200,150,50,100,50);
ra.addColorStop(0,"cyan");
ra.addColorStop(0.5,"yellowgreen");
ra.addColorStop(1,"blue");
gr.fillStyle=ra;
gr.arc(200,200,100,0,2*Math.PI);
gr.fill();
}
function zhuanhuan1(){
// rotate 旋转当前绘图
// eg: gr.rotate(angle);
// 旋转角度,以弧度计。
//如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算。
//举例:如需旋转 5 度,可规定下面的公式:5*Math.PI/180。
gr.fillStyle="rgba(0,0,0,0.5)";
gr.translate(200,200);
for(var i=0;i<18;i++) {
gr.rotate(20 * Math.PI / 180);
// fillRect 绘制被填充的矩形
gr.fillRect(50, 50, 30, 30);
}
}
function yinying(){
// 设置阴影效果
// 数字越小,颜色越纯;数字越大,颜色越模糊
gr.shadowBlur=10;
gr.shadowColor="green";
gr.shadowOffsetX=10;
gr.shadowOffsetY=10;
gr.fillStyle = "orange";
gr.fillRect(100,100,150,150);
}
</script>
</body>
</html>