1. <html>
2.
3. <head>
4. <meta http-equiv="Content-Type" contentType="text/html; charset=UTF-8" %>
5. <title>Title</title>
6. <script type="text/javascript">
7. var ball;
8. var mouseX = 100;
9. var mouseY = 100;
10. var angle = 0;
11. var radius = 0;
12.
13. var ballstyle = "."
14. var ballcolor = "#FF0000";
15. var allzindex = 0;
16.
17. var cav_elem;
18. var cav_context;
19.
20. //old positon
21. var opos;
22.
23. function draw(){
24. ball = document.createElement("p");
25. ball.style.position = "absolute";
26. ball.style.color = ballcolor;
27. ball.style.zIndex = allzindex+1;
28. ball.innerHTML = ballstyle;
29. document.body.appendChild(ball);
30. document.all.selected = false;
31.
32. ball.style["left"] = mouseX+ "px";
33. ball.style["top"] = mouseY+ "px";
34. }
35. function draw_cav(npos){
36.
37.
38.
39. if(opos){
40. cav_context.beginPath();
41. // Start from the top-left point.
42.
43. cav_context.moveTo(opos.x,opos.y);
44. cav_context.lineTo(npos.x,npos.y);
45.
46. cav_context.stroke();
47. cav_context.closePath();
48.
49. }
50.
51. }
52.
53. function MousePos(e){
54. ee = e || window.event;
55. var x,y;
56. if(!document.all){
57. x = e.pageX;
58. y = e.pageY;
59. }
60. else{
61. x = event.clientX + document.documentElement.scrollLeft;
62. y = event.clientY + document.documentElement.scrollTop;
63. }
64. return {x:x,y:y};
65. }
66. function setXY(e){
67. ee = e || window.event;
68. var pos = MousePos(e);
69. mouseX = pos.x;
70. mouseY = pos.y;
71. //if(e.button == 1){
72. draw_cav(pos);
73. //}
74. opos = pos;
75. }
76. window.onload = function(){
77.
78. //get canvas and context
79. var elem = document.getElementById('myCanvas');
80. if (elem && elem.getContext) {
81. cav_elem = elem;
82. var context = elem.getContext('2d');
83. if (context) {
84. cav_context = context;
85. //cav_context.fillRect(0, 0, cav_elem.width, cav_elem.height);
86. }
87. }
88.
89. //add mouse action
90. document.documentElement.onmousemove = function(e){
91. ee = e || window.event;
92. setXY(e);
93. };
94. }
95. </script>
96. </head>
97. <body onselectstart = "return false;">
98. <canvas id="myCanvas" border="1" width="1000" height="400">
99. Fallback content, in case the browser does not support Canvas.
100. </canvas>
101. </body>
102. </html>
分享到:
相关推荐
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的视觉体验。在这个"HTML5 Canvas打造超梦幻网页背景特效"项目中,开发者利用JavaScript和Canvas API创建了一个令人惊叹...
总的来说,html2canvas是一个非常方便的工具,可以在网页开发中广泛使用,尤其适用于动态生成页面截图的场景。它通过简单的API和高度可定制的选项,使得将网页元素转换为Canvas变得轻松和高效。
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。在这个特定的案例中,“html5 canvas圣诞节网页下雪背景特效”是一种利用Canvas API创建的视觉效果,...
HTML5 Canvas是一个强大的Web绘图工具,允许开发者在网页上直接绘制图形,为网页增加动态和交互性。在这个“520爱心表白网页代码”项目中,HTML5 Canvas被用来创建一个全屏的动画效果,展示浪漫的爱心图案,非常适合...
HTML5 Canvas是一个强大的Web图形绘制工具,它允许开发者在网页上直接通过JavaScript代码进行动态的图形绘制。这个例子中提到了“多边形”、“外半径”和“偏移半径”,这与Canvas的基本绘图操作紧密相关。 在HTML5...
总之,"HTML5 canvas仿屏保动态管道"是一个展示canvas强大图形处理能力的示例,通过JavaScript编程实现了动态视觉效果,为网页带来了互动性和趣味性。通过学习和理解这个项目,开发者可以进一步提升在canvas上的图形...
HTML5 Canvas是一个基于矢量图形的画布,通过JavaScript进行操作。它提供了丰富的绘图API,包括绘制路径、矩形、圆形、图像以及文字等。开发者可以通过修改坐标、颜色、透明度等属性来实现动态效果。 3. **Canvas...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的视觉体验。在这个“HTML5 Canvas打造超梦幻网页背景特效”的项目中,开发者利用JavaScript和Canvas API创建了一种独特...
HTML2canvas是一个强大的JavaScript库,它允许开发者在浏览器中将HTML和CSS渲染为图像。这个工具对于需要在用户端生成屏幕快照或者保存网页内容的应用非常有用,比如社交媒体分享按钮、网页打印预览或者数据分析图表...
HTML5 Canvas 是一个强大的网页图形绘制工具,允许开发者在网页上动态绘制图像,而无需依赖任何插件。在这个场景中,我们关注的是如何利用Canvas来播放视频。这涉及到HTML5的Media API和Canvas API的结合使用,使得...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
HTML5 Canvas是HTML5的一个核心特性,它允许开发者在网页上进行动态图形绘制,提供了一种在网页上呈现复杂图形的强大工具。JavaScript作为Web开发中的主要脚本语言,与Canvas结合可以实现丰富的交互效果。Ribbon.js...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的视觉效果。在这个“HTML5 Canvas全屏背景动画特效”的主题中,我们将深入探讨如何利用Canvas来创建引人注目的全屏动画...
总的来说,html2canvas是前端开发中的一个重要工具,它让浏览器具备了将网页内容转化为图像的能力,极大地拓展了Web应用的功能边界。随着版本的迭代,它的稳定性和兼容性也在不断加强,为开发者带来了更多可能性。在...
这个"一个基于html5 canvas的流程图demo.zip"文件很可能包含了一个使用HTML5 Canvas技术实现的流程图示例项目。下面将详细探讨HTML5 Canvas以及其在多媒体和游戏开发中的应用。 HTML5 Canvas是一个基于矢量图形的...
HTML2canvas是一个JavaScript库,它的主要功能是将HTML页面的内容渲染成Canvas图像,进而可以转换为JPEG、PNG或SVG格式的图片。这个技术在Web开发中有着广泛的应用,尤其是在H5(HTML5)开发中,比如创建屏幕截图、...
HTML5的canvas元素是网页开发中的一个强大工具,它提供了在浏览器端动态绘制图形的能力,包括图片处理。在这个示例中,我们将深入探讨如何利用canvas进行图片的裁剪、旋转和缩放操作。 首先,我们需要在HTML文件中...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式2D内容。这个“html5 canvas 游戏”是一个基于HTML5 Canvas技术开发的小游戏,主题是“兔子吃萝卜”,展示了...
总的来说,HTML5和Canvas结合使用,为开发者提供了一个强大且灵活的平台,用于构建富有创意的网页应用。扇形菜单的实现是一个很好的实例,展示了如何将这些技术应用于实际项目中,提高用户体验并展示出HTML5的强大...