跪求，html,css,js前端怎么实现某个点按照轨迹来画图案。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跪求，html,css,js前端怎么实现某个点按照轨迹来画图案。相关的知识，希望对你有一定的参考价值。
这是以前写的涂鸦板一样的东西,按住鼠标左键拖拽就可以绘制指针的运动轨迹<body>
<center>
<canvas id="cavsElem" width="800" height="560" style="border: 1px solid black; ">你的浏览器不支持此涂鸦板</canvas>
画笔颜色：<input type="color" id="context.color" />
画笔大小:<input type="number"id="context.size" max="10" value="1" />
</center>
<script>
(function()
var canvas=document.getElementById('cavsElem');//获得画布
var context=canvas.getContext('2d');//准备画笔
var a=document.getElementById('context.color');
var b=document.getElementById('context.size');
canvas.onmousedown=function(e) //鼠标触发onmousedown事件时,获取起始坐标
var x=e.clientX-canvas.getBoundingClientRect().left;
var y=e.clientY-canvas.getBoundingClientRect().top;
context.beginPath();
context.moveTo(x,y);
canvas.onmousemove=function(event) //触发鼠标移动事件时，获取绘制线条的坐标
var x=event.clientX-canvas.getBoundingClientRect().left;
var y=event.clientY-canvas.getBoundingClientRect().top;
context.lineTo(x,y);//绘制线条
context.strokeStyle=a.value;
context.lineWidth=b.value;
context.stroke();
;
canvas.onmouseup=function(event) //鼠标被松开时，返回null
canvas.onmousemove=null;
;
;
());
</script>
</body> 参考技术A 要用到canvas标签，然后用javascript来实现追问
比如呢？画个圆
前端-js基础
HTML三把利剑之一，浏览器具有解析js的能力
一、js基础
在HTML中可以将JavaScript/JS的代码写在head中，被script标签所包裹，当浏览器解释HTML时，遇到style标签时，按照CSS规则解释，遇到Script标签时，按照JavaScript的语法规则解释。
引入JavaScript代码，类似于Python的import
<script src="public.js" type="text/javascript"></script>
head中引入JS与body中引入JS区别
html代码从上而下解析，如果在head中引入JS，影响页面打开的速度，存在风险，所以通常放在htmlbody的最下方，这样页面内容先展示，最后在加载JS。注：写在最下面要有底线，写在body内部的最底下。
注释
单行注释通过 // 多行通过 /* */
JavaScript 中，常见的是驼峰法的命名规则，如 lastName (而不是lastname)。
1.1 js变量
const a = 1//定义常量，不可以修改 let name = ‘xiaolin‘//定义变量，没有预解析 var name1 = ‘xiaoxiaolin‘//定义变量，预解析，提前给定义为undefined,
1.2 字符串
//定义字符串
var str = ‘你开心就好‘;
var name=‘疯狂的石头‘;
//字符串的拼接
var name_str = name+str;
//字符串操作
str.charAt(0)//根据角标获取字符串中的某一个字符 char字符
str.substring(1,3) //根据角标获取 字符串子序列 顾头不顾尾（大于等于x 小于y ）
str.length //获取字符串长度
str.concat(‘五月天‘) //拼接字符串
str.indexOf(‘五月‘)//获取子序列的位置
str.slice(0,1)//切片 开始，结束 顾头不顾尾
str.toLowerCase()//变为小写
str.toUpperCase()//变为大写
str.split(‘,‘)//以指定的字符串进行分割，返回数组，参数2为取分割后数组的前多少个元素
1.3 数字类型
var age=19;
var score = 89.5;
number = ‘18‘;
//字符串转换
var n = parseInt(number);
//转换为小数
f = parseFloat(number);
//布尔类型
var t = true;
var f = false;
1.4 数组类型
// 第一种创建方式 var list = new Array(); list[0] = ‘李四‘; list[1] = ‘王五‘; // 第二种创建方式 var list2 = new Array(‘李四‘,‘王五‘); // 第三种创建方式 var list3 = [‘李四‘,‘牛教授‘]; 数组操作 var list4 = [‘李四‘,‘王五‘]; list3.length;// 数组的长度 list3.push(‘dsx‘);// 尾部追啊参数 list3.shift();// 头部获取一个元素 并删除该元素 list3.pop();// 尾部获取一个元素 并删除该元素 list3.unshift(‘dsx‘);// 头部插入一个数据 list3.splice(start, deleteCount, value);// 插入、删除或替换数组的元素 list3.splice(n,0,val) ;//指定位置插入元素 list3.splice(n,1,val);// 指定位置替换元素 list3.splice(n,1);// 指定位置删除元素 list3.slice(1,2);// 切片; list3.reverse() ;//反转 list3.join(‘-‘) ;//将数组根据分割符拼接成字符串 list3.concat([‘abc‘]);// 数组与数组拼接 list3.sort() ;//排序
1.5 对象类型（等同于Python的字典）
var dict = {name:‘dsx‘,age:18,sex:‘男‘ };
var age = dict.age;
var name = dict[‘name‘];
delete dict[‘name‘] 删除
delete dict.age 删除
1.6 js条件判断语句
var score = 89
if(score>=90){
console.log(‘优秀‘)
}else if(score>=80 && score<90){
console.log(‘良好‘)
}else if(score>=60 && score<80){
console.log(‘中等‘)
}else{
console.log(‘不及格‘)
}
switch (score) {
case 90:
console.log(‘优秀‘)
break;
case 80:
console.log(‘良好‘)
break;
default;
1.7 js循环语句
//第一种循环
//循环的是角标
tmp = [‘宝马‘, ‘奔驰‘, ‘尼桑‘];
tmp = ‘宝马奔驰尼桑‘;
tmp = {‘宝马‘: ‘BMW‘, ‘奔驰‘: ‘BC‘};
for (var i in tmp) {
console.log(tmp[i])
}
//第二种循环
//不支持字典的循环
for (var i = 0; i < 10; i++) {
console.log(tmp[i])
}
//第三种循环
while (1 == 1) {
console.log(111)
}
1.8函数
// 普通函数
function funcName(name,age) {
}
funcName(‘lis‘,78);
//匿名函数，函数即变量
var funcNameTwo = function(){
};
funcNameTwo()
二、DOM
DOM（Document Object Model 文档对象模型）
一个web页面的展示，是由html标签组合成的一个页面，dom对象实际就是将html标签转换成了一个文档对象。可以通过dom对象中js提供的方法，找到html的各个标签。通过找到标签就可以操作标签使页面动起来，让页面动起来。
2.1 获取标签
//直接获取标签 document.getElementById(‘id1‘);//根据id获取标签 document.getElementsByName(‘elname‘);//根据属性name获取标签数组 document.getElementsByTagName(‘div‘);//根据标签名称获取标签数组 document.getElementsByClassName(‘c1‘);根据属性class获取标签数组 //间接获取标签 var temp = document.getElementById(‘id1‘); temp.parentElement;//父节点标签元素 temp.children;//所有子节点 temp.firstElementChild;//第一个子标签元素 temp.lastElementChild;//最后一个标签元素 temp.nextElementSibling;//下一个兄弟标签元素 temp.previousElementSibling;//上一个兄弟标签元素
2.2 文本内容操作
//文本内容操作： // innerHTML和innerText temp.innerText;//获取标签中的文本内容 temp.innerHTML;//获取标签中的所有内容，包括html代码 temp.innerText=‘fdsfsfs‘;//修改标签中的文本内容 temp.innerHTML=‘<input type="text">fdsfsfs</input>‘//可以将html格式的字符串变为标签 //input textarea标签 temp.value;//获取input，textarea的值 temp.value=‘fdsfsfs‘;//修改input，textarea的值 //select标签 tmp.value; //获取select标签的value参数 tmp.value = ‘选项‘ // 修改select选项 tmp.selectedIndex; // 获取select标签的选项下标 tmp.selectedIndex = 1 // 通过下标更改select的选项
2.3 事件
<!-- 直接绑定-->
<input type="button" id="b1" onclick="show()">
function show() {
alert(‘fdsfsdlfsjflskjdf‘)
}
<!--间接绑定-->
<input type="button" id="b2" >
var b2 = document.getElementById(‘b2‘);
b2.onmouseover = function () {
b2.style.backgroundColor=‘red‘
}
// 间接绑定的this代指，getElementById找到的这个标签
var obj = document.getElementById(‘b2‘);
obj.onmouseout = function () {
this.style.background = ‘‘;
}
以上是关于跪求，html,css,js前端怎么实现某个点按照轨迹来画图案。的主要内容，如果未能解决你的问题，请参考以下文章
跪求解答js的问题，动态添加的html元素怎么调用js方法?