HTML5——canvas运用

最新推荐文章于 2022-08-30 19:02:47 发布

橙子酱ha

最新推荐文章于 2022-08-30 19:02:47 发布

阅读量268

点赞数

本文链接：https://blog.csdn.net/tyl1999/article/details/80668283

版权

1.
2. 鼠标事件
3. offsetX 和offsetY相对于源事件
4. clientX 和clientY相对于浏览器
5. screenX 和screenY相对于显示器
6.
7. 绘图的方法和函数
8. fillStyle : “#fff”; //填充颜色
9. font : “10px SimHei” //字体
10. globalAlpha : 1 //全局透明度
11. imageSmoothingEnabled: true //启用图片平滑
12. lineCap : “butt” //线条头部
13. lineJoin : “miter” //线条连接处
14. lineWidth : 1 //线条宽度
15. shadowBlur : 0 //阴影半径
16. shadowColor: “rgba(0, 0, 0, 0)” //阴影颜色
17. shadowOffsetX : 0 //阴影X轴偏移量
18. shadowOffsetY : 0 //阴影Y轴偏移量
19. strokeStyle : “#000000” //轮廓/描边样式
20. textAlign : “start” //文本对齐方式
21. textBaseline : “alphabetic” //文本基线
22.
23. arc() //拱形
24. arcTo() //拱形到
25. beginPath() //开始一条路径
26. bezierCurveTo() //绘制贝塞尔曲线
27. clearRect() //清除矩形范围
28. clip() //裁切
29. closePath() //闭合路径
30. createLinearGradient() //创建线性渐变色
31. createRadialGradient() //创建径向渐变色
32. drawImage() //绘制图像
33. ellipse() //绘制椭圆
34. fill() //填充路径
35. fillRect() //填充矩形
36. fillText() //填充文本
37. lineTo() //到指定点绘制一条直线
38. measureText() //测量文本的宽度
39. moveTo() //移动到指定点
40. rect() //绘制矩形路径
41. resetTransform() //重置变形
42. restore() //恢复
43. rotate() //旋转
44. save() //保存
45. scale() //缩放
46. stroke() //勾勒轮廓/描边
47. strokeRect() //描边矩形区域
48. strokeText() //对文本进行文本
49. transform() //变形
50. translate() //平移

案例：

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{ background:#000;}
#c1{ background:white;}
</style>
</head>
<body>
<canvas id="c1" width="500" height="500">
</canvas>
<script type="text/javascript">
var oC=document.getElementById('c1');
var oGC=oC.getContext('2d');

oGC.beginPath();
oGC.moveTo(50,150);
oGC.lineTo(200,50);
oGC.lineTo(350,150);
oGC.lineTo(50,150);
oGC.fillStyle='green';
oGC.fill();
oGC.closePath();
oGC.moveTo(350,150);
oGC.lineTo(350,300);
oGC.lineTo(50,300);
oGC.lineTo(50,150);
oGC.lineWidth=5;
oGC.strokeStyle='red';
oGC.stroke();
oGC.closePath();

oGC.beginPath();
oGC.moveTo(250,200);
oGC.lineTo(310,200);
oGC.lineTo(310,300);
oGC.lineTo(250,300);
oGC.fillStyle='green';
oGC.fill();
oGC.closePath();

oGC.beginPath();
oGC.strokeRect(80,180,80,80);
oGC.stroke();
oGC.closePath();

</script>
</body>

这里写图片描述

橙子酱ha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5——canvas运用

/** 鼠标事件 offsetX 和offsetY相对于源事件 clientX 和clientY相对于浏览器 screenX 和screenY相对于显示器绘图的方法和函数 fillStyle : “#fff”; //填充颜色 font : “10px SimHei” //字体 globalAlph...
复制链接

扫一扫