<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
*{
margin:0;
padding:0;
list-style:none;}
canvas{
border:solid 1px;}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<canvas id="myCanvas" height="200px" width="200px"></canvas>
<img height="200px" width="200px" id="test" src="images/xiaotu.jpg"/>
<script>
$(document).ready(function(e) {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//画方框
/* ctx.fillStyle="#ff0000";
ctx.fillRect(50,50,100,100);*/
//划线
/* ctx.moveTo(10,10);
ctx.lineTo(100,100);
ctx.stroke();*/
//画圆
/* ctx.beginPath();
ctx.arc(80,80,60,0,1.5*Math.PI);
ctx.stroke();*/
//添加 字
/* ctx.font="30px Arial";
ctx.strokeText("hello word",50,100)*/
//渐变
/*制作径向渐变时 context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内参数含义如下:
x: 渐变的开始圆的 x 坐标
y: 渐变的开始圆的 y 坐标
r: 开始圆的半径
x1: 渐变的结束圆的 x 坐标
y1: 渐变的结束圆的 y 坐标
r1: 结束圆的半径
(x, y, r) (x1,y1,r1)分别可以代表一个圆形的特征, 个人感觉通常情况下(x,y) 和 (x1,y1)简单地相同即可(即同心圆), 这样做出来的径向渐变已经十分美观,符合大众审美观。
*/ //创建渐变
/* var grd=ctx.createLinearGradient(0,0,200,200);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white")
//填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,180,180);*/
//绘制图像
/* var img=document.getElementById("test");
ctx.drawImage(img,10,10);
});*/
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
*{
margin:0;
padding:0;
list-style:none;}
canvas{
border:solid 1px;}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<canvas id="myCanvas" height="200px" width="200px"></canvas>
<img height="200px" width="200px" id="test" src="images/xiaotu.jpg"/>
<script>
$(document).ready(function(e) {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//画方框
/* ctx.fillStyle="#ff0000";
ctx.fillRect(50,50,100,100);*/
//划线
/* ctx.moveTo(10,10);
ctx.lineTo(100,100);
ctx.stroke();*/
//画圆
/* ctx.beginPath();
ctx.arc(80,80,60,0,1.5*Math.PI);
ctx.stroke();*/
//添加 字
/* ctx.font="30px Arial";
ctx.strokeText("hello word",50,100)*/
//渐变
/*制作径向渐变时 context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内参数含义如下:
x: 渐变的开始圆的 x 坐标
y: 渐变的开始圆的 y 坐标
r: 开始圆的半径
x1: 渐变的结束圆的 x 坐标
y1: 渐变的结束圆的 y 坐标
r1: 结束圆的半径
(x, y, r) (x1,y1,r1)分别可以代表一个圆形的特征, 个人感觉通常情况下(x,y) 和 (x1,y1)简单地相同即可(即同心圆), 这样做出来的径向渐变已经十分美观,符合大众审美观。
*/ //创建渐变
/* var grd=ctx.createLinearGradient(0,0,200,200);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white")
//填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,180,180);*/
//绘制图像
/* var img=document.getElementById("test");
ctx.drawImage(img,10,10);
});*/
</script>
</body>
</html>
扫一扫
3546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
